如何自动求和HTML表中共享相同名称的输入值框

How to automatically sum input value boxes in an HTML table that share the same name?

本文关键字：输入 求和 何自动 HTML 共享      更新时间：2023-11-04

我有一个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"输入框中，并且应自动计算，并随着输入框中的值的变化而更新。

类似这样的东西：

$('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/

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

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

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

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

如果您有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，然后执行此操作。

相关文章：