如何总结一个过滤的HTML表格? [英] How to sum a filtered html table?
问题描述
我有一个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表格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
