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

Question

I have a table with two different columns that I would like to add up to their respective sums. Right now I just add up one of the columns, I could add up the second column by just making the same JS again but with different names for the values but that is not so pretty. How would I do to change it so it counts the ue column as well as the egen and spit out two results, sum and 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>

This is my javascript that I use to add up the values in the column egen .

$(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

You can target all elements in .egen or .ue by the following selector:

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

Or if you prefer:

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

By the way you don't need to iterate over the collection of elements to bind keyup listeners to them, you can bind to the entire collection immediately:

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

EDIT

I note from the presence of #sum and #sum2 that you may want to sum up the columns separately. You could do something like this:

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

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

And then of course set the value of #sum or #sum2 , respectively. That could be acheived in a number of ways. Either you pass the id, just as we're passing the class above, or you use a class named sum , and have the respective td 's reuse the egen and ue classes. That way you could access the correct sum with $(container+'.sum').val() . Another solution would be to just return the sum, and setting it in your keyup listener:

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

Note also that your parsing could be simplified. parseFloat will yield NaN for a lot of invalid values, including empty strings and null , so you do not need to check your values closely before calling it. NaN will evaluate to false, so you could always sum by (parsedResult || 0) , as the result would be 0 , leaving the sum unaffected, if parsedResult is NaN .

Thus:

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

Answer 2

changed your sum <span> id to its respective class_sum like

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

so that we can get this working with one function

try this

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

this will work for any number of input ... just need to make sure the corresponding sum span is given the right id...