Question

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

我的意思是这样的： 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

Answer 2

尝试，

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

DEMO

Answer 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

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效果，例如将bg-color更改为黄色或某些颜色以显示是否单击tr）和再次单击时删除类... 在class =＆＃34;单击＆＃34;的基础上，我们将添加或删除总数中的值。

请参阅以下代码：

$("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);
    });

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

4 个答案:

DEMO

Example