Question

我创建了一个用户可以添加行的表。在特定列上，有一个输入，用户可以插入一个值，jQuery将汇总所有值并将其插入另一个输入

所以，为了说清楚，这是一个例子：

问题是，在我添加更多行之后，它不会对所有输入求和。它只会对FIRST行的FIRST输入求和，但是当我在第二，第三，第四和......输入中插入一个值时它不会求和。

这是表格：

<table id="twe">
        <thead>
        <tr>
          <th valign="middle"><center>Amaun</center></th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td><input name="amount[]" type="text" class="amount" id="amount[]" value="" /></td>
        </tr>
        </tbody>
      </table>

<button type="button" onclick="addrow('twe')"  title="Add">Add</button>
<br/>
<br/>
Sum: <input type="text" id="sum" />

这是脚本

(function($) {
    $.fn.currencyFormat = function() {
        this.each( function( i ) {
            $(this).change( function( e ){
                if( isNaN( parseFloat( this.value ) ) ) return;
                this.value = parseFloat(this.value).toFixed(2);
            });
        });
        return this; //for chaining
    }
})( jQuery );

$(document).ready(function () {
    $('.amount').currencyFormat();

});


$(document).ready(function () {
 $(".amount").each(function () {

     $(this).keyup(function () {
         calculateSum();
     });
 });

});

function calculateSum() {

 var sum = 0;
 $(".amount").each(function () {

     if (!isNaN(this.value) && this.value.length != 0) {
         sum += parseFloat(this.value);
     }

 });
 $("#sum").val(sum.toFixed(2));
 }


 function addrow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[1].cells.length;

        for(var i=0; i<colCount; i++) {

            var newcell = row.insertCell(i);

            newcell.innerHTML = table.rows[1].cells[i].innerHTML;
            switch(newcell.childNodes[0].type) {
                case "text":
                        newcell.childNodes[0].value = "";
                        break;

            }
        }
}

输入货币也是如此。它只适用于第一行的第一个输入。

需要帮助

谢谢

Answer 1

问题在于绑定事件时。在document.ready函数中，您循环遍历.amount项并绑定一个密钥，但这并不能解释将要创建的FUTURE项。您要做的是绑定所有实例和future实例以运行计算。

这可以使用jQuery中的.on事件来完成。您的document.ready将更新如下：

$(document).ready(function () {
    $(document).on("keyup", ".amount", calculateSum);
});

工作小提琴：http://jsfiddle.net/p2Hbm/

使用JQuery对动态表中的每个输入求和

1 个答案: