搜索列html表 [英] Searching columns html table
问题描述
我创建了一个包含HTML的表,并希望集成一个搜索框,可以搜索4列(name,name2,last_name,last_name2)。我试图找到1列,但在写完下一列后没有显示任何内容
I have created a table with HTML and want to integrate a search box that can search 4 columns(name,name2,last_name,last_name2). I tried to find 1 column but after writing the next column is not showing anything
例如我想:
find name and last_name
find name2 and last_name2
find last_name and name2
find name and last_name and name2
在其他词汇中,无论订单如何,但在按下SPACE键后都没有显示结果。
In others words no matter the order but after pressing the key "SPACE" is not showing results.
这是我的问题:
<input type="text" id="filter" />
<table id="table">
<tr>
<td>foo</td>
<td>1</td>
</tr>
<tr>
<td>bar</td>
<td>2</td>
</tr>
<tr>
<td>some</td>
<td>3</td>
</tr>
<tr>
<td>other</td>
<td>4</td>
</tr>
</table>
这是我的Javascript:
Here is my Javascript:
// Function
function filterTable(value) {
if (value != "") {
$("#table tbody>tr").hide();
$("#table td:contains-ci('" + value + "')").parent("tr").show();
} else {
$("#table tbody>tr").show();
}
}
// jQuery expression for case-insensitive filter
$.extend($.expr[":"], {
"contains-ci": function (elem, i, match, array) {
return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
// Event listener
$('#filter').on('keyup', function () {
filterTable($(this).val());
});
有人知道怎么解决这个问题吗?
Please someone knows how to resolve this?
推荐答案
如果键入多个单词,则必须分别过滤每个单词。否则,您正在寻找具有整个空格分隔字符串的字段。
If you type multiple words, you have to filter each of them separately. Otherwise, you're looking for a field that has the entire space-separated string.
这会拆分搜索字符串,然后显示与其中任何一个匹配的行。 / p>
This splits the search string, and then shows rows that match any of them.
// Function
function filterTable(value) {
if (value != "") {
$("#table td:contains-ci('" + value + "')").parent("tr").show();
}
}
// jQuery expression for case-insensitive filter
$.extend($.expr[":"], {
"contains-ci": function (elem, i, match, array) {
return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
// Event listener
$('#filter').on('keyup', function () {
if ($(this).val() == '') {
$("#table tbody > tr").show();
} else {
$("#table > tbody > tr").hide();
var filters = $(this).val().split(' ');
filters.map(filterTable);
}
});
这篇关于搜索列html表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!