1

我有一个带有输入框列的 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>

表格中会有多行，容量列中的每个输入框都同名。因此Capsum列的总和应该显示在“capsum”输入框中，并且应该随着输入框中的值的变化而自动计算和更新。

4

4 回答 4

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/

于 2012-07-18T14:52:13.817 回答
0

钩住change事件，最好在表级别。然后总结所有值：

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]();
});

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

于 2012-07-18T15:20:29.743 回答
-1

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

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

于 2012-07-18T14:52:34.390 回答
-1

如果你有 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，请获取 jQuery，然后执行此操作。

于 2012-07-18T14:56:36.497 回答