我有一个表,其中包含一些用户详细信息。我已经从JSON填充了这些数据。在表格的底部,我有一个文本字段,供可以键入一些信息以过滤表格的用户使用。例如,
考虑一个表包含10行。前6行包含开发人员详细信息,后4行包含测试人员详细信息。如果用户在文本框中输入开发人员,则该表应显示包含有关开发人员信息的行。我如何通过使用jQuery实现此目的?
我不想在这里发布我的错误代码。所以请不要让我发布一些代码。
您可以使用filter() jQuery函数对行进行过滤,直到找到<td>
与您在文本框中编写的内容匹配的行,然后单击按钮后进行过滤。
例:
HTML:
<table id="myTable">
<thead><tr><td>Member</td><td>Stuff</td></tr></thead>
<tbody>
<tr><td>Developer</td><td>1</td></tr>
<tr><td>Developer</td><td>2</td></tr>
<tr><td>Developer</td><td>3</td></tr>
<tr><td>Tester</td><td>4</td></tr>
<tr><td>Tester</td><td>5</td></tr>
</tbody>
</table>
<input type="text" id="filter" />
<input type="button" id="btnFilter" value="Filter" />
Javascript:
$(document).ready(function() {
$("#btnFilter").click(function() {
$("#myTable tbody tr").show();
if($("#filter").val.length > 0) {
$("#myTable tbody tr").filter(function(index, elm) {
return $(elm).html().toUpperCase().indexOf($("#filter").val().toUpperCase()) < 0;
}).hide();
}
});
});
工作提琴:http : //jsfiddle.net/tKqw9/1/
编辑:将toUpperCase()添加到文本比较部分,以便比较不区分大小写的文本。还为整个<tr>
元素内容添加了一个比较,以便可以搜索该行中的任何单元格值。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句