1

我有一个包含两个不同列的表，我想将它们加起来为它们各自的总和。现在我只是将其中一列相加，我可以通过再次制作相同的 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);
};
4

2 回答 2

2

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

然后当然分别设置#sumor的值#sum2。这可以通过多种方式实现。要么你传递 id，就像我们传递上面的类一样，要么你使用一个名为 的类sum，并让各自td的 重用egen和ue类。这样您就可以使用$(container+'.sum').val(). 另一种解决方案是只返回总和，并将其设置在您的 keyup 侦听器中：

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

另请注意，您的解析可以简化。parseFloat将产生NaN许多无效值，包括空字符串和null，因此您无需在调用它之前仔细检查您的值。NaN将评估为假，因此您始终可以通过 求和(parsedResult || 0)，结果将是0，如果parsedResult是，则总和不受影响NaN。

因此：

var sum = 0;
$(container).find(':input').each(function() {
   sum += (parseFloat( $(this).val() ) || 0);
});
于 2013-04-02T07:54:41.417 回答
1

将您的总和<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......

于 2013-04-02T08:04:09.277 回答