计算所有列的总和 [英] Calculate sum of all columns
本文介绍了计算所有列的总和的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想计算所有列中父行的总和.这就是我现在正在做的事情 [jsFiddle] :
I want to calculate the sum total of the parent rows in all the columns. Here's what I'm doing right now [jsFiddle]:
HTML:
<table class="table">
<tr class="parent-A">
<td><h5>A</h5></td>
<td> </td>
<td><input type="text" /></td>
<td> </td>
<td><input type="text" /></td>
<td> </td>
<td><input type="text" /></td>
</tr>
<tr>
<td><h6>A1</h6></td>
<td> </td>
<td><input type="text" data-parent="A" /></td>
<td> </td>
<td><input type="text" data-parent="A" /></td>
<td> </td>
<td><input type="text" data-parent="A" /></td>
</tr>
<tr>
<td><h6>A2</h6></td>
<td> </td>
<td><input type="text" data-parent="A" /></td>
<td> </td>
<td><input type="text" data-parent="A" /></td>
<td> </td>
<td><input type="text" data-parent="A" /></td>
</tr>
<tr>
<td><h6>A3</h6></td>
<td> </td>
<td><input type="text" data-parent="A" /></td>
<td> </td>
<td><input type="text" data-parent="A" /></td>
<td> </td>
<td><input type="text" data-parent="A" /></td>
</tr>
<tr class="parent-B">
<td><h5>B</h5></td>
<td> </td>
<td><input type="text" /></td>
<td> </td>
<td><input type="text" /></td>
<td> </td>
<td><input type="text" /></td>
</tr>
<tr>
<td><h6>B1</h6></td>
<td> </td>
<td><input type="text" data-parent="B" /></td>
<td> </td>
<td><input type="text" data-parent="B" /></td>
<td> </td>
<td><input type="text" data-parent="B" /></td>
</tr>
<tr>
<td><h6>B2</h6></td>
<td> </td>
<td><input type="text" data-parent="B" /></td>
<td> </td>
<td><input type="text" data-parent="B" /></td>
<td> </td>
<td><input type="text" data-parent="B" /></td>
</tr>
<tr>
<td><h6>B3</h6></td>
<td> </td>
<td><input type="text" data-parent="B" /></td>
<td> </td>
<td><input type="text" data-parent="B" /></td>
<td> </td>
<td><input type="text" data-parent="B" /></td>
</tr>
<tr class="total">
<td colspan="2"><h4>Total A + B</h4></td>
<td colspan="2"><input type="text"/></td>
<td colspan="2"><input type="text"/></td>
<td><input type="text"/></td>
</tr>
<tr class="parent-C">
<td><h5>C</h5></td>
<td> </td>
<td><input type="text" /></td>
<td> </td>
<td><input type="text" /></td>
<td> </td>
<td><input type="text" /></td>
</tr>
<tr>
<td><h6>C1</h6></td>
<td> </td>
<td><input type="text" data-parent="C" /></td>
<td> </td>
<td><input type="text" data-parent="C" /></td>
<td> </td>
<td><input type="text" data-parent="C" /></td>
</tr>
<tr>
<td><h6>C2</h6></td>
<td> </td>
<td><input type="text" data-parent="C" /></td>
<td> </td>
<td><input type="text" data-parent="C" /></td>
<td> </td>
<td><input type="text" data-parent="C" /></td>
</tr>
<tr>
<td><h6>C3</h6></td>
<td> </td>
<td><input type="text" data-parent="C" /></td>
<td> </td>
<td><input type="text" data-parent="C" /></td>
<td> </td>
<td><input type="text" data-parent="C" /></td>
</tr>
<tr class="parent-D">
<td><h5>D</h5></td>
<td> </td>
<td><input type="text" /></td>
<td> </td>
<td><input type="text" /></td>
<td> </td>
<td><input type="text" /></td>
</tr>
<tr>
<td><h6>D1</h6></td>
<td> </td>
<td><input type="text" data-parent="D" /></td>
<td> </td>
<td><input type="text" data-parent="D" /></td>
<td> </td>
<td><input type="text" data-parent="D" /></td>
</tr>
<tr>
<td><h6>D2</h6></td>
<td> </td>
<td><input type="text" data-parent="D" /></td>
<td> </td>
<td><input type="text" data-parent="D" /></td>
<td> </td>
<td><input type="text" data-parent="D" /></td>
</tr>
<tr>
<td><h6>D3</h6></td>
<td> </td>
<td><input type="text" data-parent="D" /></td>
<td> </td>
<td><input type="text" data-parent="D" /></td>
<td> </td>
<td><input type="text" data-parent="D" /></td>
</tr>
<tr class="total">
<td colspan="2"><h4>Total C + D</h4></td>
<td colspan="2"><input type="text"/></td>
<td colspan="2"><input type="text"/></td>
<td><input type="text"/></td>
</tr>
</table>
jQuery:
$(function () {
$('[class*="parent-"] input').attr('readonly', true);
$('input[type=text]').on('blur', function () {
var totals = [0, 0, 0];
var $dataRows = $(".table");
var parent_name = $(this).data('parent');
var find_parent_row = $('tr.parent-' + parent_name);
var $total_row = $('.total');
var total = 0;
find_parent_row.nextUntil('[class*="parent-"]').find('input').each(function () {
totals[$(this).parent('td').index() / 2 - 1] += +this.value;
});
find_parent_row.find('input').each(function(i) {
this.value = totals[i];
var tVal = parseFloat ( totals[i] );
if (tVal) {
total += tVal;
$total_row.find('input').eq(i).val( total );
}
});
});
});
这是因为它将显示父行的最后一个计算值，而不是像应有的那样将它们全部添加.
What this does is that it will display the last calculated value of the parent row and not add them all like it should.
推荐答案
html
<tr class="total" data-par="A,B"> <!-- for A+B -->
<tr class="total" data-par="C,D"> <!-- for C+D -->
js
var total_par = $('tr.total');
total_par.each(function () {
totals = [0, 0, 0];
var par = $(this).data('par').split(',');
$('[data-parent="' + par[0] + '"]').add('[data-parent="' + par[1] + '"]').each(function () {
totals[$(this).parent('td').index() / 2 - 1] += +this.value;
});
$(this).find('input').val(function (i) {
return totals[i];
});
});
这篇关于计算所有列的总和的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
