jQuery sum行添加所有单元格

我搜索了有关添加表列的各种SO问题,但在行上没有多少.这是我到目前为止所拥有的：

HTML

<table>
    <thead>
        <tr>
            <th>MAX ATK</th>
            <th>MAX DEF</th>
            <th>MAX HP</th>
            <th>Overall</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="combat">8170</td>
            <td class="combat">6504</td>
            <td class="combat">6050</td>
            <td class="total-combat"></td>
        </tr>
        <tr>
            <td class="combat">8500</td>
            <td class="combat">10200</td>
            <td class="combat">7650</td>
            <td class="total-combat"></td>
        </tr>
        <tr>
            <td class="combat">9185</td>
            <td class="combat">7515</td>
            <td class="combat">9185</td>
            <td class="total-combat"></td>
        </tr>
    </tbody>
</table>

jQuery的

$(document).ready(function () {
     var sum = 0;
     $('tr').find('.combat').each(function () {
         var combat = $(this).text();
         if (!isNaN(combat) && combat.length !== 0) {
             sum += parseFloat(combat);
         }
     });

     $('.total-combat').html(sum);
 });

你可以看到我的小提琴here.

问题：它正在查找所有出现的.combat并将它们相加而不是仅查找当前行中出现的.combat.所以代替：

MAX ATK MAX DEF MAX HP  Overall
 8170    6504    6050   20724
 8500    10200   7650   26350
 9185    7515    9185   25885

我越来越：

MAX ATK MAX DEF MAX HP  Overall
 8170    6504    6050   72959
 8500    10200   7650   72959
 9185    7515    9185   72959

我尝试使用nearest()思考,告诉它找到父tr并且只在那个tr中添加tds,如下所示：

$('.combat').closest('tr').each(function () {

但那不起作用:(

任何帮助将不胜感激！

解决方法

你需要使用每个循环

$(document).ready(function () {
    //iterate through each row in the table
    $('tr').each(function () {
        //the value of sum needs to be reset for each row,so it has to be set inside the row loop
        var sum = 0
        //find the combat elements in the current row and sum it 
        $(this).find('.combat').each(function () {
            var combat = $(this).text();
            if (!isNaN(combat) && combat.length !== 0) {
                sum += parseFloat(combat);
            }
        });
        //set the value of currents rows sum to the total-combat element in the current row
        $('.total-combat',this).html(sum);
    });
});

演示：Fiddle

较短的求和方式：使用一元加 – Demo

原文地址：https://www.jb51.cc/jquery/180825.html