计算具有相似类别的每个 td 的总和
Posted
技术标签:
【中文标题】计算具有相似类别的每个 td 的总和【英文标题】:calculate sum of each td having similar class 【发布时间】:2016-06-13 10:00:40 【问题描述】:我的 html 表格 td 是这样的
<td class="20">1</td>
<td class="20">2</td>
<td class="20">3</td>
<td class="20">4</td>
<td class="20">5</td>
<td class="20">3</td>
<td class="total"></td>
<td class="30">2</td>
<td class="30">5</td>
<td class="30">6</td>
<td class="total"></td>
我正在尝试计算 td's
在课堂 total
之前可用的数量,并将这些值相加并将其放入相应的总类 td 中。
所以我想得到
<td class="20">1</td>
<td class="20">2</td>
<td class="20">3</td>
<td class="20">4</td>
<td class="20">5</td>
<td class="20">3</td>
<td class="total">Total : 18</td>
<td class="30">2</td>
<td class="30">5</td>
<td class="30">6</td>
<td class="total">Total : 13</td>
这是我尝试过的。
var sum = 0;
$('.total').each(function()
var tdTxt = $(this).prev('td').text();
sum += parseFloat(tdTxt);
);
但它不起作用。如何做到这一点?
【问题讨论】:
【参考方案1】:试试:
var temp = 0;
$('td').each(function()
var tdTxt = $(this).text();
if($(this).hasClass('total'))
$(this).text(temp);
temp = 0;
else
temp+= parseFloat(tdTxt);
);
https://jsfiddle.net/8f4b1tok/
【讨论】:
【参考方案2】:您可以尝试以下方法:
$('.total').each(function()
var sum = $(this).prevUntil('.total').map(function()
return parseInt($(this).text());
).get().reduce((a, b) => a + b, 0);
$(this).text('Total : ' + sum);
);
【讨论】:
【参考方案3】:看到您的更新后,我可以使用prevUntil 解决方案:
$('.total').each(function()//To calculate with
var sum = 0;//initialize sum equal to 0
var fields = $(this).prevUntil('.total');//find the required tds until the .total
fields.each(function()//loop each total fields
sum += parseFloat($(this).text());//add each tds value to sum
);
$(this).html('<b>The total is: ' + sum + '</b>');//push the value of sum to .total field
);
https://jsfiddle.net/dox114ff/
【讨论】:
【参考方案4】:您可以使用prevUntil
导航回到td
的前一个siblings
直到选择器、DOM 等。可以阅读更多关于prevUntil
here 的信息。
请找到工作演示here。
HTML:
<table>
<tbody>
<tr>
<td class="20">1</td>
<td class="20">2</td>
<td class="20">3</td>
<td class="20">4</td>
<td class="20">5</td>
<td class="20">3</td>
<td class="total"></td>
<td class="30">2</td>
<td class="30">5</td>
<td class="30">6</td>
<td class="total"></td>
</tr>
</tbody>
</table>
JS:
$(function ()
$('.total').each(function ()
var numbers = $(this).prevUntil('.total').text().split('');
var total = 0;
$.each(numbers, function (k, v)
total += parseInt(v);
);
$(this).text('[Total = ' + total + ']');
console.log('total=', total);
)
);
【讨论】:
【参考方案5】:由于 jQuery 提供了.prevUntil()
API 来遍历前一个兄弟,直到遇到要停止的元素,所以像这样使用它:
$('.total').each(function()
var sum = 0,
elem = $(this).prevUntil('.total');
elem.each(function()
sum += parseInt($(this).text())
);
$(this).text('Total :' + sum);
);
DEMO
【讨论】:
【参考方案6】:$(document).ready(function()
$('.total').each(function()
var prevClass = $(this).prev().attr('class');
var sum = 0;
$('.' + prevClass).each(function()
sum += Number($(this).text());
)
$(this).text('Total :'+sum);
)
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="20">1</td>
<td class="20">2</td>
<td class="20">3</td>
<td class="20">4</td>
<td class="20">5</td>
<td class="20">3</td>
<td class="total">8</td>
<td class="30">2</td>
<td class="30">5</td>
<td class="30">6</td>
<td class="total"></td>
</tr>
</table>
【讨论】:
【参考方案7】:尝试 .prevAll() 函数。在以下链接中查找文档:
http://api.jquery.com/prevall/
http://www.w3schools.com/jquery/traversing_prevall.asp
【讨论】:
以上是关于计算具有相似类别的每个 td 的总和的主要内容,如果未能解决你的问题,请参考以下文章