gpt4 book ai didi

jquery - 如何使用 jQuery 过滤表(表数据从 JSON 文件填充)?

转载 作者:搜寻专家 更新时间:2023-10-31 23:03:31 25 4
gpt4 key购买 nike

我有一个包含一些用户详细信息的表。我已经从 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();
}
});
});

工作 fiddle :http://jsfiddle.net/tKqw9/1/

编辑: 将 toUpperCase() 添加到文本比较部分,以便比较不区分大小写。还添加了一个整体比较<tr>元素内容,以便它可以搜索行中的任何单元格值。

关于jquery - 如何使用 jQuery 过滤表(表数据从 JSON 文件填充)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24457068/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com