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

【问题标题】：How to auto SUM TD value on click event inside TR with jquery如何使用 jquery 在 TR 内的点击事件上自动 SUM TD 值
【发布时间】：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()); });

标签： javascript jquery html ajax html-table

【解决方案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);
    });

【讨论】：