要实现表格列的总和和JQuery实时搜索,我们可以使用以下解决方法:
代码示例:
HTML:
列1
列2
列3
1
2
3
4
5
6
JavaScript:
$(document).ready(function() {
var total = 0;
$('.sum-column').each(function() {
var value = parseFloat($(this).text());
total += value;
});
$('#total').text('总和:' + total);
});
代码示例:
HTML:
姓名
年龄
张三
20
李四
25
王五
30
JavaScript:
$(document).ready(function() {
$('#search').on('input', function() {
var value = $(this).val().toLowerCase();
$('table tbody tr').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
这样,每次输入框的值发生改变时,表格中只会显示符合搜索条件的行。
上一篇:表格列的总和返回不正确的值。
下一篇:表格列的最佳自动宽度