在动态添加的行中用jquery计算并构建一列

Question

我有一个 (HTML) 表单，其中包含按需动态添加的字段。如果您在字段中输入内容，您会得到一行。

最后它计算一个总数。

HTML

<form id="myForm">Factor:
    <input type="text" name="factor" value="6" />
    <fieldset id="cloneset">
        <input type="text" name="qty[1]" />
        <input type="text" name="product[1]" onkeyup="if (this.value.length > 2 && treated[this.name] != 1){ addOne(); treated[this.name] = '1'; }"
        />
        <input class="cost" type="text" name="amount[1]" onkeyup="calculateSum();" />
    </fieldset>
    <input id="total" type="text" name="total">
</form>

jQuery

​​>

treated = new Object();
inputNumber = 1;

function addOne() {
    inputNumber++;
    $('#cloneset').append('<div><input type="text" name="qty[' + inputNumber + ']" /> <input type="text" name="product[' + inputNumber + ']" onkeyup="if (this.value.length > 2 && treated[this.name] != 1){ addOne(); treated[this.name] = \'1\'; }" /> <input class="cost" type="text" name="amount[' + inputNumber + ']" onkeyup="calculateSum();" /></div>');
}

function calculateSum() {

    var sum = 0;
    //iterate through each textboxes and add the values
    $(".cost").each(function () {
        //add only if the value is number
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
        }
    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#total").val(sum.toFixed(2));
}

我有一个工作演示 in a fiddle

现在我想输入 - 比方说 - 小时，乘以（固定）速率。

寻找最佳实践来做到这一点。

Answer 1

HTML

<form id="myForm">Rate:
<input type="text" name="factor" value="6" id="rate" class="rate" />
<table id="cloneset">
    <tr>
        <td>
            <input type="text" name="qty[1]" onkeyup="calculateRow();" class="qty" />
        </td>
        <td>
            <input type="text" name="product[1]" onkeyup="if (this.value.length > 2 && treated[this.name] != 1){ addOne(); treated[this.name] = '1'; }" />
        </td>
        <td>
            <input class="cost" type="text" name="amount[1]" onkeyup="calculateSum();" />
        </td>
    </tr>
</table>
<input id="total" type="text" name="total">

jQuery

​​>

treated = new Object();
inputNumber = 1;

function addOne() {
    inputNumber++;
    $('#cloneset').append('<tr><td><input type="text" name="qty[' + inputNumber + ']" onkeyup="calculateRow();" class="qty" /></td><td><input type="text" name="product[' + inputNumber + ']" onkeyup="if (this.value.length > 2 && treated[this.name] != 1){ addOne(); treated[this.name] = \'1\'; }" /></td><td><input class="cost" type="text" name="amount[' + inputNumber + ']" onkeyup="calculateSum();" /></td></tr>');
}

function calculateSum() {

    var sum = 0;
    //iterate through each textboxes and add the values
    $(".cost").each(function () {
        //add only if the value is number
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
        }
    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#total").val(sum.toFixed(2));
}

function calculateRow() {

    $('.qty, .rate').change(function () {
        var cost = 0;
        var $row = $(this).closest("tr");
        var qty = parseFloat($row.find('.qty').val());
        var rate = parseFloat($("#rate").val())
        cost = qty * rate;
        //        alert($("#rate").val());

        if (isNaN(cost)) {
            $row.find('.cost').val("Nix is");
        } else {
            $row.find('.cost').val(cost);
        }
        calculateSum();
    })
}

工作解决方案in a fiddle

这可能是一种糟糕的编程风格。欢迎提出改进建议。