gpt4 book ai didi

javascript - 如何对过滤后的 html 表求和?

转载 作者:行者123 更新时间:2023-12-05 07:04:46 27 4
gpt4 key购买 nike

我有一个可以使用 jquery 过滤的 HTML 表。在我的表格底部,我想要一个“总计”行,它总结了所有显示的值。 “总计”行中显示的总和应该是所有显示行的总和,即不考虑隐藏行。

我试图添加一个条件,例如使求和取决于行的显示样式,但是没有成功。有没有简单的解决方案来实现这个?就像一个简单的 javascript if 条件检查 td 元素所属的行是否隐藏?

编辑:我的 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;
}
}

关于javascript - 如何对过滤后的 html 表求和?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62869572/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com