使用JQuery计算动态表中的每个输入值

我已经创建了一个用户可以添加行的表格。而就具体列，有一个输入，其中用户可以插入值和jQuery将总结所有的值，并将其插入到另一个输入使用JQuery计算动态表中的每个输入值

所以，要清楚，这里有一个例子：

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

这里的表：

<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; 

      } 
     } 
}

同去与输入货币。它只适用于第一行的第一个输入。

需要帮助

谢谢

来源

2014-07-10 Syafiq AZ

的问题在于，当你要绑定的事件。在您的document.ready函数中，您正在通过.amount项目循环并绑定一个键值，但这不会计算将创建的FUTURE项目。你想要做的是绑定所有实例和将来的实例来运行计算。

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

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

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

来源

2014-07-10 19:11:41 entropic

谢谢！现在接下来的问题是我使用jQuery .toFixed（）将.amount输入转为十进制数，但是它仅适用于第一行 –

@SyafiqAZ我不确定你会得到什么...... – entropic

对不起，不足以解释清楚。我已更新了我的问题。希望是明确的 –

使用JQuery计算动态表中的每个输入值

回答

相关问题