Question

我有一个带有输入框列的HTML表格，并且希望自动显示框中值的总和（即，不更改总和按钮并更新，因为框中的值已更改）。表中的行数因为通过速度动态创建而变化。下面是一个示例HTML表，我想要显示容量行中的值的总和。我不确定从哪里开始，我尝试过很多JavaScript代码并且无法正常工作。

 <table border = "1" id = "table">
  <TR>
        <TH>Resource</TH> 
        <TH>Vacation</TH>
        <TH>Allocation</TH>
        <TH>Holidays</TH> 
        <TH>Capacity</TH>
        <TH>Remainder</TH>
    </TR>

  #foreach($user in $userList)
  <tr>
  <td>$user.resource</td>

        <td><input type=text name="vacation" size="6" maxlength="10"></td>
        <td><input type=text name="alloc" size="6" maxlength="10"></td>
        <td><input type=text name="holidays" size="6" maxlength="10"></td>
        <td><input type=text name="capacity" size="6" maxlength="10"></td>
        <td><input type=text name="remainder" size="6" maxlength="10"></td>
    </tr>
  #end 
  <tr>
  <td>Total:</td>
  <td></td><td></td><td></td>
  <td class= "capsum"><input type="text" name="captotal" size="6" maxlength="10"></td>
  <td><input type="text" name="remtotal" size="6" maxlength="10"></td>

  </tr>

  </table>

表中将有多行，而capacity列中的每个输入框都共享相同的名称。因此，Capacity列的总和应显示在“capsum”输入框中，并应自动计算并在输入框中的值更改时更新。

Answer 1

这样的事情：

$('table#table input[name=capacity]').change(function()
{
 var sum = 0;

 $('table#table input[name=capacity]').each(function()
 {
  sum += parseInt($(this).val());
 });

 $('input[name=captotal]').val(sum);
});

http://jsfiddle.net/H7DSX/10/

Answer 2

挂钩change event，最好table level。然后总结所有值：

var updatefns = {};
jQuery.each(["vacation", "alloc" ,"holidays", "capacity", "remainder"], function(i, name) {
     // cache all the elements
     var head = $("#table tr:first th:nth-child("+i+")"); // kind of selector
     var inputs = $("#table input[name=\""+name+"\"]");
     updatefns[name] = function() {
         var sum = 0;
         inputs.each(function(){
             sum+=parseInt(this.value) || 0;
         });
         // set new text:
         head.text(name.charAt(0).toUppercase+name.substr(1)+": "+sum);
     };
});
$("#table").change(function(e){
     var t, n;
     if ((t = e.target) && (n = t.name) && n in updatefns)
         updatefns[n]();
});

您可以使用更好的选择器来更新头细胞，也可以给它们一个相应的属性来选择它们。当然，您可以自由更改新文本的设置方式。

Answer 3

您需要为需要求和的表单字段分配onChange JavaScript事件要处理的函数。

然后，此函数将简单地读出每个字段的值，计算总和，然后将其存储回需要的位置。

Answer 4

如果你有jQuery试试：

<table onchange="reloadSum()"></table>

var reloadSum = function() {
    var sums = $('.toBeSummed'); // this will need to be the class of the things you want to sum
    var sum = 0;
    for (var i = 0; i < sums.length; i++) {
        sum += parseFloat(sums[i].value);// or maybe parseFloat(sums[i].innerHTML)
    }
    $('#capsum').text(sum);
}

如果你没有jQuery get jQuery然后这样做。

如何自动汇总共享相同名称的HTML表中的输入值框？

4 个答案: