jQuery if or while loops

Question

I haven't done much (or any) jQuery. I found the following script on here to, but I have a question. All the attempts I've tried while searching this site have ruined the script. I only want it sum the values of the other columns if the checkbox is checked.

Here is an example table:

<table id="sum_table" class="example">
<thead>
    <tr class="titlerow">
        <td class="table-sortable:numeric">Apple</td>
        <td class="table-sortable:numeric">Orange</td>
        <td class="table-sortable:numeric">Watermelon</td>
        <td class="table-sortable:numeric">Turtle</td>
    </tr>
</thead>

    <tr>
    <td class="rowDataSd">52</td>
    <td class="rowDataSd">911</td>
    <td class="rowDataSd">911</td>
    <td><input type="checkbox" name="cb" value="1"></td>

    </tr>
    <tr>
    <td class="rowDataSd">989</td>
    <td class="rowDataSd">24</td>
    <td class="rowDataSd">911</td>
    <td><input type="checkbox" name="cb" value="1"></td>

    </tr>
    <tr>
    <td class="rowDataSd">989</td>
    <td class="rowDataSd">911</td>
    <td class="rowDataSd">911</td>
    <td><input type="checkbox" name="cb" value="1"></td>
    </tr>
<tfoot>
    <tr class="totalColumn">
        <td class="totalCol">Total:</td>
        <td class="totalCol">Total:</td>
        <td class="totalCol">Total:</td>
        <td class="totalCol">Total:</td>
    </tr>
</tfoot>

Here's the script:

$('#sum_table tr:first td').each(function(){

     var $td = $(this);  
     var colTotal = 0;

     $('#sum_table tr:not(:first,.totalColumn)').each(function(){
         colTotal  += parseInt($(this).children().eq($td.index()).html(),10);
     });

     $('#sum_table tr.totalColumn').children().eq($td.index()).html('Total: ' + colTotal);
});

Where would I put an &&, and what exactly would that && be?

I've tried adding &&s, but I'm just not familiar with how to read jQuery. I'd love to learn it and I thought this would be a simple project. Guess not. As always, any help is greatly appreciated.

Answer 1

Try this:

Much more simpler version.

 $('[name="cb"]').change(function () { // Add change event for your check boxes
    $('.totalColumn td:lt(3)').html("0"); // reset the sum tds to value 0
    $('[name="cb"]:checked').closest('tr').find('td:lt(3)').each(function () { //Loop through all the tds(but last one) for the rows of checked checkboxes
        var $td = $(this);   
        var $sumColumn = $('#sum_table tr.totalColumn td:eq(' + $td.index() + ')'); //get the correspoding column in the total checkbox relative to the current td iterated
        var currVal = $sumColumn.html() || 0; // Get the value from the column, incase it has no value default it to 0
        currVal = +currVal + +$td.html(); // add the value
        $sumColumn.html(currVal); // populate the column in the total checkbox relative to the current td iterated
    });
});

Fiddle

• .closest()
• :lt

Answer 2

This isn't validated and just wrote it up quick in notepad++. The gist of it is that you want to loop through each of your table cell's that have the "rowDataSd" class. By going to it's parent(), you can easily access that checkbox to see if it is checked. If it is checked then you just grab the value, make sure to parse it into an int and add it to your total.

var total = 0;
$('table#sum_table > tr > td.rowDataSd').each(function() {
    var checked = $(this).parent().find('input[type=checkbox]:checked').length > 0;
    if (!checked) continue; //Keep looping, the checkbox isn't checked

    // Add value to total for current <td />
    total += parseInt($(this).html());
});

HTH.

Answer 3

Here is an example based on your code : http://jsfiddle.net/UQTY2/129/

The sum is calculated by rows, hope that is what you expected.

However, this is how to perform the sum of a columns :

//Iterate all td's in second column
$('#sum_table>tbody>tr>td:nth-child(2)').each( function(){
    var tmp = parseInt($(this).text());
    if ($.isNumeric(tmp)) 
        total += tmp;    
});

JS :

$('input:checkbox').change(function () {
    //Return if unchecked
    if($(this).is(':checked') === false)
    {
        $('#total').val("select a row");
        return false;
    }

    //Unselect all other checkbox
    $("input:checkbox").not($(this)).prop('checked',false);

    //Sum of the row
    var total = 0;
    $('td', $(this).closest('tr')).each(function () {
        var tmp = parseInt($(this).text());
        if ($.isNumeric(tmp)) 
            total += tmp;
    }).promise().done(function () {
        //Update the final value destination
        $('#total').val(total);
    });
});

Answer 4

Check it out on JSfiddle

This is rather convolted but here goes:

$('#sum_table').change(function () {
    var that = $(this);

    if (that.find("input:checked")) {

        that.find("input:checked").each(function () {
            var checkedTdValue= 0;
            $(this).parent().parent().children('.rowDataSd').each(function () {
                 checkedTdValue += parseInt($(this).text());

            });
            //Put your target here
            $('div').text(checkedTdValue);
        })
    }
});