I have for example:
<table>
<tr class="main"><td>test | sum:<span class="sum_main"> </span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">2</span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">6</span></td></tr>
<tr class="main"><td>test | sum:<span class="sum_main"> </span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">2</span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
<tr class="main"><td>test | sum:<span class="sum_main"> </span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">2</span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">8</span></td></tr>
</table>
table td {
border: solid 1px black;
padding: 4px;
}
.main {
background-color: #cc99ff;
}
$(".sum_main").val( $(".sum_main").val() + $(".sum_main").val() + $(".sum_main").val()); // ???????
LIVE EXAMPLE: http://jsfiddle.net/dZLg6/
How can sum from class sum_sub and show this in sum_main with jQuery and function for example each? This example should show me:
<table>
<tr class="main"><td>test | sum:<span class="sum_main">13</span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">2</span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">6</span></td></tr>
<tr class="main"><td>test | sum:<span class="sum_main">7</span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">2</span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
<tr class="main"><td>test | sum:<span class="sum_main">20</span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">2</span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">8</span></td></tr>
</table>
You need to iterate over all the .sum_main elements. Inside the loop you can get the text from each of the following .sum_sub elements (until the next .main row) and maintain a running total:
ReplyDelete$(".sum_main").each(function() {
var total = 0;
$(this).closest("tr").nextUntil(".main").each(function() {
total += parseInt($(this).find(".sum_sub").text(), 10);
});
$(this).text(total);
});
Here's a working example.
Update
As noted in the comments, it may be worth checking that parseInt actually returns a number. If it doesn't, it will return NaN, and adding that to our total will make the total NaN. We can do this with the isNaN function. Something along these lines:
var num = parseInt($(this).find(".sum_sub").text(), 10);
if(!isNaN(num)) {
total += num;
}
http://jsfiddle.net/dZLg6/1/
ReplyDelete$("tr.main").each(function(){
var sum = 0;
$(this).nextUntil(".main").each(function(){
sum += parseInt($(this).find(".sum_sub").text(), 10)
});
$(this).find(".sum_main").text(sum);
})
var sum = 0;
ReplyDelete$(".sum_sub")).each(function(sum) {
sum += parseInt($.trim($(this).html()),10);
});
alert(sum);
If you group your rows using tbodys
ReplyDelete<table>
<tbody>
<tr class="main"><td>test | sum:<span class="sum_main"> </span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">2</span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">6</span></td></tr>
</tbody>
<tbody>
<tr class="main"><td>test | sum:<span class="sum_main"> </span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">2</span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
</tbody>
<tbody>
<tr class="main"><td>test | sum:<span class="sum_main"> </span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">5</span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">2</span></td></tr>
<tr class="sub"><td>test | sum <span class="sum_sub">8</span></td></tr>
</tbody>
</table>
then you can easily sum things
$.each(myTable.find('tbody'), function (_, tbody) {
tbody = $(tbody);
var sum = 0;
$.each(tbody.find('.sum_sub'), function (_, sum_sub) {
sum += +$(sum_sub).text();
});
tbody.find('.sum_main').text('' + sum);
});
Check this fiddle: http://jsfiddle.net/ZmsGS/
ReplyDeleteCode:
var sumSpan = null;
$('span').each(function() {
var tr = $(this);
if(tr.hasClass('sum_main')) sumSpan = tr;
else if(tr.hasClass('sum_sub')) {
if(sumSpan != null) {
sumSpan.text( parseInt(sumSpan.text(), 10) + parseInt(tr.text(), 10) );
}
}
}