如何在点击TR
时自动求和TD
值(使用class="abc"
),求和的结果必须在里面带有 class="total"
的 TD
。
下面是我的 HTML:
<table>
<tr>
<td>Bla bla</td>
<td>Bla bla</td>
<td class="abc">30</td>
<tr>
<tr>
<td>Bla bla</td>
<td>Bla bla</td>
<td class="abc">40</td>
<tr>
<tr>
<td>Bla bla</td>
<td>Bla bla</td>
<td class="abc">30</td>
<tr>
<tr>
<td>Bla bla</td>
<td>Bla bla</td>
<td class="total">100</td>
<tr>
</table>
我的意思是:
最佳答案
var total = $('td.total'), //cache your selectors
td_abc = $('td.abc');
$('tr').click(function () { //handle click event on tr
total.text(function () { //set total text
var sum = 0; //set sum to 0
td_abc.each(function () { //loop through each td element with class abc
sum += +$(this).text() //add it text to sum
});
return sum; //set sum to total
})
});
在 OP 发表评论后更新
var total = $('td.total'),
td_abc = $('td.abc');
$('tr').click(function () {
$(this).find('td.abc').data('countme', 1).css('color', 'red');//set .data('countme', 1) to the td.abc inside tr
total.text(function () {
var sum = 0
td_abc.filter(function () {
return $(this).data('countme') == 1; //filter elements which has .data('countme', 1) to be added in sum
}).each(function () {
sum += +$(this).text()
});
return sum;
})
});
如果你想要切换效果。如果你再次点击它不计入总和。
关于javascript - 如何使用 jquery 在 TR 中的单击事件上自动求和 TD 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23509171/