jQuery总结行添加所有单元格 [英] jQuery sum rows adding all cells

问题描述

我搜索了各种有关添加表列的问题，但在行上却不多。以下是目前为止的内容：

HTML

 <表> 
< thead> 
< tr> 
 MAX ATK< / th> 
 MAX DEF< / th> 
 MAX HP< / th> 
< th>整体< / 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
< $（$'$'$'$'$'$'$。$（'。''）。find（'。combat'）。每个（函数（）{
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总体
 8170 6504 6050 20724 
 8500 10200 7650 26350 
 9185 7515 9185 25885 
  

我得到：

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

我试着用 closest（）它找到父tr并只在该tr中添加tds，如下所示：

  $（'。combat'）。closest （'tr'）。each（function（）{
  

但没有用：（

任何帮助都将不胜感激！ 您需要使用每个循环

  $（document）.ready（function（）{
 //遍历表
 $（'tr'）。each（function（）{
 / / sum的值需要为每一行重新设置，所以它必须在行循环中设置
 var sum = 0 
 //找到当前行中的战斗元素并将其加和
 $（this）.find（'。combat'）。each（function（）{
 var combat = $（this）.text（）; 
 if（！isNaN（combat）&&& combat.length！== 0）{
 sum + = parseFloat（combat）; 
} 
}）; 
 //将current rows sum的值设置为当前行中的总战斗元素
 $（'。total-combat'，this）.html（sum）; 
}）; 
}）; 
  

演示：小提琴

简单总结一下：使用unary plus - 演示

I've searched various SO questions about adding table columns but not many on rows. Here's what I have so far:

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

You can see my fiddle here.

Problem: It's finding ALL occurrences of .combat and adding them up instead of only finding occurrences of .combat within the current row. So instead of:

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

I'm getting:

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

I tried using closest() thinking that would tell it to find the parent tr and only add tds within that tr, like so:

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

but that didn't work :(

Any help would be greatly appreciated!

解决方案

You need to use a each loop

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

Demo: Fiddle

A shorter way to sum: Using unary plus - Demo

这篇关于jQuery总结行添加所有单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！