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
})
});
Updated After OP's comment
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;
})
});
If you want toggle effect.If you click again it not count it in sum .