javascript - 如何使用 jquery 在 TR 中的单击事件上自动求和 TD 值

Question

如何在点击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>

我的意思是:

Answer 1

Fiddle Demo

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

Learn jQuery

jQuery API

---

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

Fiddle Demo

---

如果你想要切换效果。如果你再次点击它不计入总和。

Fiddle Demo