我刚刚创建了一个包含超过30行数据的大表,可以通过其列 - 名称列进行过滤。
过滤器的作用是 - 它将style="display: none;"
放入TR标记。
我的问题是 - 如何创建一个只计算非“display:none”行的Grand Total行?
以下是我的表格示例:
<table class="sortable TF" id="table1" border="1">
<thead>
<tr class="fltrow">
<td>
<input class="flt" ct="0" id="flt0_table1" type="text">
</td>
<td>
<input class="flt" ct="1" id="flt1_table1" type="text">
</td>
<td>
<input class="flt" ct="2" id="flt2_table1" type="text">
</td>
<td>
<input class="flt" ct="3" id="flt3_table1" type="text">
</td>
</tr>
<tr>
<th class="head_row">Person</th>
<th class="head_row">Monthly pay</th>
<th class="head_row">Monthly pay1</th>
<th class="head_row">Monthly pay2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Steve Nicol</td>
<td>8,500</td>
<td>51,000</td>
<td>1,000</td>
</tr>
<tr>
<td>Steve McMahon</td>
<td>9,200</td>
<td>3,000</td>
<td>2,000</td>
</tr>
<tr style="display: none;">
<td>Jan Molby</td>
<td>12,000</td>
<td>4,000</td>
<td>11,000</td>
</tr>
<tr style="display: none;">
<td>John Barnes</td>
<td>15,300</td>
<td>200</td>
<td>12,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Grand TOTAL</td>
<td>???</td>
<td>???</td>
<td>???</td>
</tr>
</tfoot>
</table>
答案 0 :(得分:2)
var sum = [0, 0, 0];
$('table.sortable tbody tr:visible').each(function() {
sum[0] += parseInt($('td:eq(1)', this).text().replace(',', ''), 10);
sum[1] += parseInt($('td:eq(2)', this).text().replace(',', ''), 10);
sum[2] += parseInt($('td:eq(3)', this).text().replace(',', ''), 10);
});
$('table.sortable tfoot tr td:gt(0)').each(function(i) {
var text = sum[i].toString();
if (text.length > 3) { // checking length for 3 to insert comma
text = text.replace(/(\S{3}$)/, ",$1");
}
$(this).text(text);
});
<强> DEMO 强>
但如果删除逗号,则更改为:
$('table.sortable tfoot tr td:gt(0)').each(function(i) {
$(this).text(sum[i]);
});
<强> DEMO 强>