Javascript 如何使用jquery在TR内的click事件中自动求和TD值

单击

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>

布拉布拉
布拉布拉
30
布拉布拉
布拉布拉
40
布拉布拉
布拉布拉
30
布拉布拉
布拉布拉
100

我的意思是： 试试看

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

---

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

---

若你们想要切换效果。若你们再次点击，它不会计入总数

---

非常简单，只需将click事件添加到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颜色更改为黄色或一些颜色来显示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);
    });

---

我将添加一个按钮，如：

Sum

，并使用此按钮对值求和：

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

---

$（'.total'）.each（函数（）{sum+=parseFloat（$（this.text（））；}）@khoir用演示检查更新的答案。很好的答案（y），当我再次单击TR时，总值将减少。怎么做？回答得很好，图沙古普塔@科伊尔很高兴这有帮助：）

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