Question

我有一个包含两个不同列的表，我想将它们加到各自的总和中。现在我只是添加其中一个列，我可以通过再次制作相同的JS来添加第二列，但是值的名称不同但不是那么漂亮。我该怎么做才能更改它以便计算 ue 列以及 egen 并吐出两个结果，总和和 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 列中的值的javascript。

$(document).ready(function () {

    //iterate through each td based on class / input and add keyup
    //handler to trigger sum event
    $(".egen :input").each(function () {

        $(this).keyup(function () {
            calculateSum();
        });
    });

});
function calculateSum() {

    var sum = 0;
    // iterate through each td based on class and add the values from the input
    $(".egen :input").each(function () {

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

Answer 1

您可以通过以下选择器定位.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和{{1类。这样您就可以使用ue访问正确的总和。另一个解决方案是返回总和，并在你的keyup监听器中设置它：

$(container+'.sum').val()

另请注意，您的解析可以简化。对于许多无效值，$('.ue :input').keyup(function() { $('#sum2').val( calculateSum('.ue') ); });会产生parseFloat，包括空字符串和NaN，因此您无需在调用之前仔细检查您的值。 null将评估为false，因此您可以总是按NaN求和，因为结果为(parsedResult || 0)，如果0为parsedResult，则总和不受影响

因此：

NaN

Answer 2

将您的总和<span> ID更改为其各自的class_sum，如

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

这适用于任意数量的输入......只需要确保相应的总和得到正确的ID ...

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

2 个答案: