在HTML表格中使用jQuery过滤后列中的合计值总和,可以通过以下步骤实现:
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th class="filter-column">列3</th>
<th>列4</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
<td class="filter-column">数据3</td>
<td>数据4</td>
</tr>
<!-- 其他行 -->
</tbody>
<tfoot>
<tr>
<td>合计</td>
<td></td>
<td class="total"></td>
<td></td>
</tr>
</tfoot>
</table>
<script>
$(document).ready(function() {
$('.filter-column').on('input', function() {
var total = 0;
var filterValue = $(this).text();
$('.filter-column').each(function() {
if ($(this).text() === filterValue) {
var value = parseFloat($(this).text());
if (!isNaN(value)) {
total += value;
}
}
});
$('.total').text(total);
});
});
</script>
以上脚本中,我们使用了jQuery的on
方法来监听具有"filter-column"类名的单元格的输入事件。每当输入发生变化时,脚本会重新计算合计值并更新具有"total"标识的单元格的内容。
这样,当你在具有"filter-column"类名的单元格中输入过滤条件时,合计值会根据过滤条件进行计算并实时更新。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。
领取专属 10元无门槛券
手把手带您无忧上云