如何使用javascript和jQuery总结几个列？

我有一个表，有两个不同的列，我想把它们加起来。现在我只需要加上其中一列，我可以加上第二列，只需再次制作相同的JS，但值的名称不同，但这并不漂亮。 如何更改它，使其计算ue列和egen并输出两个结果，sum和sum2

<table>
    <tr>
    <td><asp:TextBox ID="TextBox1" runat="server">Number</asp:TextBox></td>
    <td class="egen"><asp:TextBox ID="TextBox56" runat="server" Columns="1">56</asp:TextBox></td>
    <td class="ue"><asp:TextBox ID="TextBox57" runat="server" Columns="1">57</asp:TextBox></td>
    </tr>
    <tr>
    <td><asp:TextBox ID="TextBox2" runat="server">Worker</asp:TextBox></td>
    <td class="egen"><asp:TextBox ID="TextBox58" runat="server" Columns="1">58</asp:TextBox></td>
    <td class="ue"><asp:TextBox ID="TextBox59" runat="server" Columns="1">59</asp:TextBox></td>
    </tr>
    <tr>
    <td align="right">Sum:</td>
    <td align="center"><span id="sum"></span></td>
    <td align="center"><span id="sum2"></span></td
    </tr>
</table>

---

您可以通过以下选择器将

.egen

或

.ue

中的所有元素作为目标：

 $('.egen :input, .ue :input')

或者，如果您愿意：

$('.egen, .ue').find(':input')

通过这种方式，您不需要迭代元素集合来将

keyup

侦听器绑定到它们，您可以立即绑定到整个集合：

$('.egen :input, .ue :input').keyup(calculateSum);

编辑

我从出现的

#sum

和

#sum2

中注意到，您可能希望分别对列进行汇总。你可以这样做：

$('.egen :input').keyup(function() { calculateSum('.egen'); });
$('.ue :input').keyup(function() { calculateSum('.ue'); });

function calculateSum(container) {
   var sum = 0;
   $(container).find(':input').each(function() {
       ... 
   });
}

当然，然后分别设置

#sum

或

#sum2

的值。这可以通过多种方式实现。要么传递id，就像我们传递上面的类一样，要么使用名为

sum

的类，并让相应的

td

重用

egen

和

ue

类。这样，您就可以使用

$（container+'.sum'）.val（）访问正确的总和。另一种解决方案是只返回总和，并在keyup侦听器中进行设置：

$('.ue :input').keyup(function() {
   $('#sum2').val( calculateSum('.ue') );
});

还要注意，您的解析可以简化
parseFloat
将为许多无效值生成
NaN
，包括空字符串和
null
，因此在调用它之前不需要仔细检查值
NaN
的计算结果将为false，因此您可以始终按
（parsedResult | | 0）
求和，因为如果
parsedResult
为
NaN
，则结果将为
0
，且总和不受影响

因此：

将您的sum
id更改为其各自的类sum

<span id="egen_sum"></span>
<span id="ui_sum"></span>
...

这将适用于任何数量的输入。。。只需确保相应的总和范围具有正确的id
 
：应使用text
。您想要两个总和，如.ue和egen之和吗？或者它是ue和egen的总和？我想我能建议的最好的方法是使用一个变量作为选择器，也许循环一个项目数组[“.egen”、“.ue”]，然后计算总和。您还可以将求和计算作为一个函数，并将其传递给变量。使用
$（this）.parent（）.attr（'class'）
假定
class
属性将永远不会用于除
.egen
/
.ue
区别之外的任何东西，这可能是一个问题，也可能不是一个问题，但这绝对是一个bug漏洞。设置
class=“egen first row”
会破坏代码，而仅仅添加类通常被认为是非破坏性的更改。最好使用
keyupClass=$（this.parent（）.hasClass（'egen'）？'egen’：‘ue’很好，不知道您可以将此语法用于parseFloat。所有浏览器都支持这个功能吗？@deed02392:这里没有特殊的
parseFloat
功能
parseFloat
将根据其输入返回一个
数字
或
NaN
。所有浏览器都应该实现这一点。因为
NaN
是
（NaN | | 0）
的操作输出。这不是
parseFloat
的特性，而是javascript的特性。乍一看，我好像错过了paren，我以为你像
parseFloat（.val（）| 0）一样通过了它
var sum = 0;
$(container).find(':input').each(function() {
   sum += (parseFloat( $(this).val() ) || 0);
});

<span id="egen_sum"></span>
<span id="ui_sum"></span>
...

$('.egen :input, .ue :input').keyup(function(){
     var keyupClass= $(this).parent().hasClass('egen') ? 'egen' : 'ue';
     calculateSum(keyupClass);
 });

function calculateSum(keyupClass) {

  var sum = 0;
  $("."+ keyupClass+" :input").each(function () {

    var value = $(this).val();
    // add only if the value is number
    if (!isNaN(value) && value.length != 0) {
        sum += parseFloat(value);
    }
  });
  $('#'+keyupClass+"_sum").text(sum);
};