如何用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偵聽器綁定到它們，您可以立即綁定到整個集合：

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

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 ...