jQuery if 或 while 循环

Question

我没有做太多（或任何）jQuery。我在这里找到了以下脚本，但我有一个问题。我在搜索此站点时尝试的所有尝试都破坏了脚本。如果选中复选框，我只希望它对其他列的值求和。

这是一个示例表：

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

这是脚本：

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

我应该把 && 放在哪里，&& 到底是什么？

我尝试添加 &&s，但我只是不熟悉如何阅读 jQuery。我很想学习它，我认为这将是一个简单的项目。可能不会。与往常一样，非常感谢任何帮助。

Answer 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
    });
});

Fiddle

• .closest()
• :lt

Answer 2

这没有经过验证，只是在记事本++中快速编写。它的要点是您要遍历每个具有“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。

Answer 3

这是一个基于您的代码的示例：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);
    });
});

Answer 4

查看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);
        })
    }
});