[英]How to auto SUM TD value on click event inside TR with jquery
How to auto SUM TD
value (with class="abc"
) when TR
gets clicked, and result of SUM must be inside a TD
with class="total"
. 单击
TR
时如何自动SUM TD
值(带有class="abc"
),并且SUM的结果必须在带有class="total"
的TD
内。
Below is my HTML: 以下是我的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>
I mean like this: 我的意思是这样的:
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
})
});
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; }) });
I would add a button like: <button id="sum">Sum</button>
and the use this to sum the values: 我会添加一个按钮,如:
<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);
});
It is very simple, just add click event to TR and get all TD values with class="abc"
and sum them to TD with class="total"
. 这很简单,只需将Click事件添加到TR并获取所有TD值为
class="abc"
并将它们加到TD上,其中class="total"
。 Please see below code 请看下面的代码
$("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);
});
Below is the answer after adding image to the quetion. 以下是将图像添加到队列后的答案。
Here we can add a simple CSS class="clicked"
to td if its parent tr gets clicked (you can add CSS effects like change bg-color to yellow or some color to show if tr is clicked or not) and remove class when it clicked again... And on the basis of class="clicked", we will add or remove values from total. 在这里我们可以添加一个简单的CSS
class="clicked"
到td,如果它的父tr被点击(你可以添加CSS效果,如将bg-color更改为黄色或某些颜色以显示是否单击tr)并删除它时的类再次点击...在class =“clicked”的基础上,我们将添加或删除总数中的值。
please see below code: 请看下面的代码:
$("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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.