jQuery总结行添加所有单元格

本文介绍了jQuery总结行添加所有单元格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我搜索了各种有关添加表列的问题，但在行上却不多。以下是目前为止的内容： 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 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 25885I'm getting:MAX ATK MAX DEF MAX HP Overall 8170 6504 6050 72959 8500 10200 7650 72959 9185 7515 9185 72959I 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: FiddleA shorter way to sum: Using unary plus - Demo 这篇关于jQuery总结行添加所有单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！