问题描述
我有一个HTML表格，可以使用jquery进行过滤.在我表格的底部，我想有一个总计"栏.行，将显示的所有值相加.显示在总计"屏幕中的总和.行应该是显示的所有行的总和，即不考虑隐藏的行.
I have a HTML Table that I am able to filter with jquery. At the bottom of my table, i want to have a "total" row, that sums all values displayed. The sum displayed in the "total" row should be the sum of all rows displayed, i.e. not take account of the hidden rows.
我试图添加一个条件，例如使求和取决于行的显示样式，但是没有解决.有没有简单的解决方案来实现这一目标?就像一个简单的javascript if条件，该条件检查td元素所属的行是否被隐藏?
I tried to add a condition like to make the summing dependent on the display style of the row, however that didn't work out.Is there any simple solution to implement this?Like a simple javascript if condition that checks if the row the td element is a part of is hidden or not?
我的HTML-Coods如下所示(用于计算列总数的JavaScript函数位于表格之后):
My HTML-Coods looks like this (javascript function that calculates the column total comes after the table):
var columnCount = document.getElementById('datatable').rows[2].cells.length;
var tds = document.getElementById('datatable').getElementsByTagName('td');
var sum = 0;
var columnsToSum = [3,4];
for (i=0; i<columnsToSum.length;i++)
{
a = columnsToSum[i];
sum=0;
var hasPercent = false;
for(z = columnsToSum[i]; z < tds.length; z+=columnCount)
{
sum += isNaN(tds[z].innerHTML) ? 0 : parseInt(tds[z].innerHTML);
}
document.getElementById("data"+ a).innerHTML = sum;
}<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css2/bootstrap.css" />
<link rel="stylesheet" href="css2/dataTables.bootstrap.min.css" />
<link rel="stylesheet" href="css2/responsive.bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="css2/buttons.bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container-fluid" style="width:80%;">
<table id=datatable class="datatable table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Class</th>
<th>Class</th>
</tr>
</thead>
<tfoot>
<tr>
<th>
<input type="text" class="form-control input-sm filter-column" placeholder="nach ID filtern">
</th>
<th>
<input type="text" class="form-control input-sm filter-column">
</th>
<th>
<input type="text" class="form-control input-sm filter-column" />
</th>
<th>
<select class="form-control input-sm filter-column">
<option value="A">A</option>
<option value="B">B</option>
<option value="B">C</option>
</select>
</th>
<th>
<select class="form-control input-sm filter-column">
<option value="A">A</option>
<option value="B">B</option>
<option value="B">C</option>
</select>
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>bla</td>
<td>500</td>
<td>100%</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr class="sum-row">
<td id=data0></td>
<td id=data1></td>
<td id="data2">0</td>
<td id="data3">0</td>
<td id="data4">0</td>
</tr>
</tfoot>
</table>
</div>
<script language="javascript" type="text/javascript">
</script>
<script src="js2/jquery-1.11.3.min.js"></script>
<script src="js2/jquery.dataTables.min.js"></script>
<script src="js2/dataTables.bootstrap.min.js"></script>
<!-- Responsive extension -->
<script src="js2/responsive.bootstrap.min.js"></script>
<!-- Buttons extension -->
<script src="js2/dataTables.buttons.min.js"></script>
<script src="js2/buttons.bootstrap.min.js"></script>
<script src="js2/jszip.min.js"></script>
<script src="js2/buttons.html5.min.js"></script>上面的代码始终显示表中所有值的总和，而不考虑过滤.
The code above always shows the total sum of all values in the table and doesn't take account of the filtering.
推荐答案
我认为这段代码可以工作.
I think this code will work.
$(document).ready(function () {
var table = $('#datatable').DataTable();
calculatesum(table.rows().nodes());
$('input').on('keyup click', function () {
var searched = table.rows({
search: 'applied'
}).nodes();
calculatesum(searched);
});
});
function calculatesum(all) {
var columnsToSum = [2, 4];
for (i = 0; i < columnsToSum.length; i++) {
a = columnsToSum[i];
sum = 0;
for (j = 0; j < all.length; j++) {
var val = all[j].getElementsByTagName('td')[a].innerHTML;
sum += isNaN(val) ? 0 : parseInt(val);
}
document.getElementById("data" + a).innerHTML = sum;
}
}
这篇关于如何总结一个过滤的HTML表格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！