表格搜索

虽然表格的排列相当困难,但表格的搜索却非常容易。增加一个搜索输入,如果那里的值匹配到了任意一行的文本,则显示该行,并隐藏其他所有的行。使用jQuery来实现就像下面这么简单:

1
2
3
4
5
var allRows = $("tr");
$("input#search").on("keydown keyup", function() {
allRows.hide();
$("tr:contains('" + $(this).val() + "')").show();
});

没有看错,就是这么简单,如果是在实际应用中,可以这样来写: 先声明一个按钮:

1
<input type="search" id="search" placeholder="请输入内容……">

在input框之后加入以下JavaScript代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
// Quick Table Search
$('#search').keyup(function() {
var regex = new RegExp($('#search').val(), "i");
var rows = $('table tr:gt(0)');
rows.each(function (index) {
title = $(this).children("#title").html()
if (title.search(regex) != -1) {
$(this).show();
} else {
$(this).hide();
}
});
});
</script>

完美运行有木有!!!



本文链接: http://home.meng.uno/articles/49d54823/ 欢迎转载!

© 2018.02.08 - 2020.10.14 Mengmeng Kuang  保留所有权利!

UV : | PV :

:D 获取中...

Creative Commons License