Question

我已经搜索了有关添加表列的各种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

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

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

但是没有用:(

非常感谢任何帮助！

Answer 1

您需要使用每个循环

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

Answer 2

你可以使用它;

$(document).ready(function () {

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

HEre正在运行演示： http://jsfiddle.net/wq459/

Answer 3

尝试

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

jQuery sum行添加所有单元格

3 个答案: