如何使用jQuery在TR内点击事件中自动求TD值的总和

Question

如何在点击 TR 时自动 SUM（带有 class="abc"）的 TD 值，并且 SUM 的结果必须位于带有 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>

我理解为这样： 它是一个表格的图片。

- Khoerodin

---

$('.total').each(function(){ sum += parseFloat($(this).text()); }); - swetha

Answer 1

Fiddle演示

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

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

示例演示

---

如果您想要切换效果。如果再次单击，则不计入总和。

示例演示

- Tushar Gupta - curioustushar

---

@khoir，请查看带演示的更新答案。 - Tushar Gupta - curioustushar

不错的答案 (y), 当我再次点击TR时，TOTAL值会减少。 如何做到这一点？ - Khoerodin

太棒了，Tushar Gupta的回答！ - Khoerodin

Answer 2

尝试一下，

$('tr').click(function(){
  var sum = 0;
  $('td.abc').each(function(){
    sum += parseInt($(this).text(),10);
  })
  $('td.total').text(sum);
});

DEMO

- Rajaprabhu Aravindasamy

Answer 3

我会添加一个类似这样的按钮：<button id="sum">求和</button>，然后使用它来计算数值：

$('#sum').on('click', function () {
    var sum = 0;
    $('table td.abc').each(function () {
        sum += parseInt(this.innerHTML, 10);
    });
    $('table td.total').html(sum);
});

示例

- Sergio

Answer 4

非常简单，只需将点击事件添加到TR并使用class="abc"获取所有TD值，并将它们相加到具有class="total"的TD中。请参见下面的代码

$("tr").click(function(){
  var total = 0;
  $("td.abc").each(function(){
  total+=parseInt($(this).html()); // You can use parseFloat if value is float.
  });

  $("td.total").html(total);
});

以下是在问题中添加图像后的答案。 在这里，如果其父母 tr 被点击，我们可以向 td 添加一个简单的 CSS class="clicked"（您可以添加 CSS 效果，如更改背景颜色为黄色或某种颜色以显示是否已单击 tr），并在再次单击时删除类... 根据 class="clicked" 的基础上，我们将添加或删除总值。 请参见下面的代码：

$("tr").click(function(){
      var total =  $("td.total").html();

      if(total==null || total=="")
         total = 0;     

      $(this).find(".abc").each(function(){
          var tdCSS = $(this).attr("class");
          if(tdCSS.indexOf("clicked")!=-1)
           { 
              total-=parseInt($(this).html()); // You can use parseFloat if value is float.
           }
           else
           {
             total+=parseInt($(this).html()); // You can use parseFloat if value is float.
           }
            $(this).toggleClass("clicked");
      });

      $("td.total").html(total);
    });

- Bhushan Kawadkar