我在屏幕上填充了一个 html 表格。我编写了一段工作代码来使用列上的逗号分隔字符串来过滤表。对于例如 - 列名称 = ID, 我给出的示例过滤器字符串 = 1,2,3,4,6,8,9,90。因此它仅显示具有这些 ID 的行。我的JS代码如下-
$(function () {
$("#filter").click(function () {
try {
ids = $("#inputFilter").val();
if (ids != "") {
idsArray = ids.split(",");
$("#my-table tr:gt(0)").hide();
$.each(idsArray, function (i, v) {
$("#my-table tr[data-id=" + v + "]").show();
})
} else {
$("#my-table tr").show();
}
}
catch (error) {
try {
$body.removeClass("loading");
}
catch (error) {
}
alert(error);
}
});
});
现在我想启用 ID 的部分搜索,这意味着,例如,当我输入 23,45,78,4324,5436,321321 时,表也应该开始过滤部分匹配。如何实现?
最佳答案
首先,您需要删除多余的空格,然后 split(",")
和 JQuery 选择器 [attribute*=”value”]
就像 $ ("#my-table tr[data-id*='"+ v + "']")
选择具有 data-id
' 值的所有行具有任何搜索输入 ID ,试试这个例子:
$(function () {
$("#filter").click(function () {
try {
ids = $("#inputFilter").val();
if (ids != "") {
idsArray = ids.replace(/[\n\r\t]/g,"").replace(/\s+/g,"").split(",");
$("#my-table tr:gt(0)").hide();
$.each(idsArray, function (i, v) {
$("#my-table tr[data-id*='" + v + "']").show();
})
} else {
$("#my-table tr").show();
}
}
catch (error) {
try {
$body.removeClass("loading");
}
catch (error) {
}
alert(error);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='inputFilter'>
<button id='filter'>filter</button>
<table id='my-table'>
<tr><th>ID</th><th>Name</th></tr>
<tr data-id="1"><td>1</td><td>Tom 1</td></tr>
<tr data-id="2"><td>2</td><td>John 1</td></tr>
<tr data-id="3"><td>3</td><td>Van 1</td></tr>
<tr data-id="10"><td>10</td><td>Tom 10</td></tr>
<tr data-id="20"><td>20</td><td>John 20</td></tr>
<tr data-id="30"><td>30</td><td>Van 30</td></tr>
<tr data-id="101"><td>101</td><td>Tom 101</td></tr>
<tr data-id="202"><td>202</td><td>John 202</td></tr>
<tr data-id="303"><td>303</td><td>Van 303</td></tr>
</table>
关于javascript - 对 html 表的列启用部分匹配搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40283040/