我有一个 HTML 表，我可以使用 jquery 过滤它。在表格的底部，我想要一个“总计”行，它将显示的所有值相加。 “总计”行中显示的总和应该是显示的所有行的总和，即不考虑隐藏行。
我尝试添加一个条件，例如使求和取决于行的显示样式，但这没有成功。
有没有简单的解决方案来实现这个？
就像一个简单的 JavaScript if 条件一样，检查 td 元素所属的行是否隐藏？
EDIT:我的 HTML-Coods 看起来像这样（计算列总数的 JavaScript 函数位于表格后面）：
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>
上面的代码始终显示表中所有值的总和，并且不考虑过滤。
我认为这段代码会起作用。
$(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;
}
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
