2

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.

4

4 回答 4

1

尝试这个：

更简单的版本。

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

小提琴

于 2013-06-21T21:09:57.967 回答
0

这是基于您的代码的示例：http: //jsfiddle.net/UQTY2/129/

总和是按行计算的，希望这是您的预期。

但是，这是如何执行列的总和：

//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);
    });
});
于 2013-06-21T21:01:55.090 回答
0

这未经验证，只是在记事本++中快速编写。它的要点是您要遍历每个具有“rowDataSd”类的表格单元格。通过转到它的 parent()，您可以轻松访问该复选框以查看它是否被选中。如果它被选中，那么您只需获取该值，确保将其解析为一个 int 并将其添加到您的总数中。

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。

于 2013-06-21T20:50:19.110 回答
0

在JSfiddle上查看

这是相当令人费解的，但这里有：

$('#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);
        })
    }
});
于 2013-06-21T21:09:47.973 回答