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

Question

我有一个包含两个不同列的表格，我想将它们相加以得出它们各自的总和。现在我只添加其中一列，我可以通过再次制作相同的 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 列中值的 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 监听器绑定(bind)到它们，您可以立即绑定(bind)到整个集合:

$('.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) 求和，因为结果将为 0，留下总和不受影响，如果 parsedResult 是 NaN。

因此:

var sum = 0;
$(container).find(':input').each(function() {
   sum += (parseFloat( $(this).val() ) || 0);
});