如何使用 jquery 在 TR 内的点击事件上自动 SUM TD 值

Posted 2023-03-05

【中文标题】如何使用 jquery 在 TR 内的点击事件上自动 SUM TD 值

【英文标题】：How to auto SUM TD value on click event inside TR with jquery

【发布时间】：2014-06-23 22:06:20

【问题描述】：

当TR 被点击时如何自动求和TD 值（和class="abc"），求和的结果必须在TD 和class="total" 内。

下面是我的 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>

我的意思是这样的：

【问题讨论】：

$('.total').each(function() sum += parseFloat($(this).text()); );

【参考方案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

【讨论】：

@khoir 使用演示检查更新的答案。

不错的答案 (y)，当我再次单击 TR 时，TOTAL 值会减少。怎么办？

很好的答案 Tushar Gupta！

@khoir 很高兴它帮助了 :)

【参考方案2】：

试试，

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

DEMO

【参考方案3】：

我会添加一个按钮，例如：<button id="sum">Sum</button> 并使用它来对值求和：

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

Example

【参考方案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);
);

下面是添加图片到问题后的答案。 在这里，我们可以添加一个简单的 CSS class="clicked" 到 td，如果它的父 tr 被点击（你可以添加 CSS 效果，比如将 bg-color 更改为黄色或某种颜色以显示 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);
    );