javascript 如何使用 jQuery 构建一个简单的表格过滤器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7051800/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to build a simple table filter with jQuery?
提问by Sheikhasa Mozali
How can I build a simple table filter with good effect using jQuery? I don't mind about pagination.
如何使用jQuery构建一个效果良好的简单表格过滤器？我不介意分页。
list -> select data of database.
list -> 选择数据库的数据。
I do not want to use a plugin, I prefer the use of short code.
我不想使用插件，我更喜欢使用短代码。
Example:
例子：
回答by thecodeparadox
$('#inputFilter').keyup(function() {
var that = this;
$.each($('tr'),
function(i, val) {
if ($(val).text().indexOf($(that).val()) == -1) {
$('tr').eq(i).hide();
} else {
$('tr').eq(i).show();
}
});
});
回答by Hymansonkr
I don't normally help out with this, but I got bored this morning..
我通常不会帮忙解决这个问题，但今天早上我很无聊..
回答by davinceleecode
I know it's kinda late but hope this code helps.
我知道现在有点晚了，但希望这段代码有帮助。
<script>
$(document).ready(function(){
$("#yourInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#yourTableId tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
回答by rsplak
Try testing the innerHTML of the row to the value of the input field, showing / hiding the content depending on the test-result.
尝试将行的 innerHTML 测试为输入字段的值，根据测试结果显示/隐藏内容。
$('#test').bind('keyup', function() {
var s = new RegExp(this.value);
$('tr').each(function() {
if(s.test(this.innerHTML)) $(this).show();
else $(this).hide();
});
});
JSFIDDLEwith example table and input field.
带有示例表和输入字段的JSFIDDLE。
edit
编辑
It might be better to use .text()instead of innerHTML. Performancewise innerHTML would be better, but .text()doesn't accept the html-tags as valid search results. JSFIDDLE#2.
使用.text()而不是innerHTML可能更好。Performancewise innerHTML 会更好，但.text()不接受 html-tags 作为有效的搜索结果。JSFIDDLE#2。
