jquery - 動的に追加された行で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));
}

私はフィドルで動作するデモを持っています

ここで、(固定) レートで乗算される時間 (たとえば、時間) を入力したいと思います。

これを行うためのベスト プラクティスのロック。