Javascript 使用包含选择器在多个列中搜索
我正在创建一个用户可以在多个列中搜索的搜索 我使用jQueryJavascript 使用包含选择器在多个列中搜索,javascript,jquery,html,contains,Javascript,Jquery,Html,Contains,我正在创建一个用户可以在多个列中搜索的搜索 我使用jQuery：contains实现了对单个列的搜索，但没有了解如何进行多列搜索 代码： 从上面的代码中，它一次搜索一列，但我希望在nameabcd中使用number12345搜索单词，因此它只显示与两个关键字匹配的一行 试试这个 名称 数 abcd 12345 abcd 67890 ijkl 00000 mnop 00000 函数搜索（）{ var searchName=$（“#searchName”）.val（）； var searchNum
：containsnamenumber
名称
数
abcd
12345
abcd
67890
ijkl
00000
mnop
00000
函数搜索（）{
var searchName=$（“#searchName”）.val（）；
var searchNumber=$（“#searchNumber”）.val（）；
如果（searchName=''&&searchNumber=''）{
$（'tr.data'）.show（）；
}
否则{
$（'tr.data'）.hide（）；
如果（searchName！=''&&searchNumber！=''）{
var eleSearchName=$（“.search_name:contains（“+searchName+”）；
如果（eleSearchName.length>0）{
$.each（eleSearchName，函数（）{
if（$（this）.next（“td.search\u编号：包含（“+searchNumber+”）））。长度>0）
$（this.parent（'tr'）.show（）；
});
}
}
else if（searchName！=''）{
$（'.search_name:contains（'+searchName+'））.parent（'tr'）.show（）；
}
else if（searchNumber！=''）{
$（'.search_number:包含（'+searchNumber+'））.parent（'tr'）.show（）；
}
否则{
$（'tr.data'）.show（）；
}
}
}
名称
数
abcd
12345
abcd
67890
ijkl
00000
mnop
00000
$（“.searchbox”）.on（'keyup'，函数（）{
if（$（this.val（）！=“”）{
搜索（本）；
}
否则{
$（“.data”）.show（）；
$.each（$（“.searchbox”），函数（）{
if（$（this.val（）！=“”）{
$（this.keyup（）；
}
});
}
});
功能搜索（ele）{
var val=$（ele.val（）| |'''；
如果（val=''）
返回；
var dataclass=$（ele.attr（'data-class'）；
var SearchInText=''；
$.each（$（“.data:visible”），函数（）{
SearchInText=$（this.find（“td.+dataclass）.text（）；
if（SearchInText.indexOf（val）=-1）
$（this.hide（）；
});
}
abcd12345<table border="1" cellpadding="10">
<tr style="background:#428bca; color:#fff;">
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>
<input type="text" onkeyup="search('name', this.value);" />
</td>
<td>
<input type="text" onkeyup="search('number', this.value);" />
</td>
</tr>
<tr>
<td class="search_name">abcd</td>
<td class="search_number">12345</td>
</tr>
<tr>
<td class="search_name">abcd</td>
<td class="search_number">67890</td>
</tr>
<tr>
<td class="search_name">ijkl</td>
<td class="search_number">00000</td>
</tr>
<tr>
<td class="search_name">mnop</td>
<td class="search_number">00000</td>
</tr>
</table>
function search(field, val) {
if (val.length > 1) {
$('.search_name').parent('tr').hide();
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function(elem) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
if (field == 'name') {
$('.search_name:contains(' + val + ')').parent('tr').show();
}
if (field == 'number') {
$('.search_number:contains(' + val + ')').parent('tr').show();
}
} else {
$('.search_name').parent('tr').show();
}
}
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<table border="1" cellpadding="10">
<tr style="background:#428bca; color:#fff;">
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>
<input id="searchName" type="text" onkeyup="search();" />
</td>
<td>
<input id="searchNumber" type="text" onkeyup="search();" />
</td>
</tr>
<tr class="data">
<td class="search_name">abcd</td>
<td class="search_number">12345</td>
</tr>
<tr class="data">
<td class="search_name">abcd</td>
<td class="search_number">67890</td>
</tr>
<tr class="data">
<td class="search_name">ijkl</td>
<td class="search_number">00000</td>
</tr>
<tr class="data">
<td class="search_name">mnop</td>
<td class="search_number">00000</td>
</tr>
</table>
<script>
function search() {
var searchName = $("#searchName").val() || '';
var searchNumber = $("#searchNumber").val() || '';
if (searchName == '' && searchNumber == '') {
$('tr.data').show();
}
else {
$('tr.data').hide();
if (searchName != '' && searchNumber != '') {
var eleSearchName = $(".search_name:contains(" + searchName + ")");
if (eleSearchName.length > 0) {
$.each(eleSearchName, function () {
if ($(this).next("td.search_number:contains(" + searchNumber + ")").length > 0)
$(this).parent('tr').show();
});
}
}
else if (searchName != '') {
$('.search_name:contains(' + searchName + ')').parent('tr').show();
}
else if (searchNumber != '') {
$('.search_number:contains(' + searchNumber + ')').parent('tr').show();
}
else {
$('tr.data').show();
}
}
}
</script>
</body>
</html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<table border="1" cellpadding="10">
<tr style="background:#428bca; color:#fff;">
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>
<input class="searchbox" data-class="search_name" type="text" />
</td>
<td>
<input class="searchbox" data-class="search_number" type="text" />
</td>
</tr>
<tr class="data">
<td class="search_name">abcd</td>
<td class="search_number">12345</td>
</tr>
<tr class="data">
<td class="search_name">abcd</td>
<td class="search_number">67890</td>
</tr>
<tr class="data">
<td class="search_name">ijkl</td>
<td class="search_number">00000</td>
</tr>
<tr class="data">
<td class="search_name">mnop</td>
<td class="search_number">00000</td>
</tr>
</table>
<script>
$(".searchbox").on('keyup', function () {
if ($(this).val() != '') {
search(this);
}
else {
$(".data").show();
$.each($(".searchbox"), function () {
if ($(this).val() != '') {
$(this).keyup();
}
});
}
});
function search(ele) {
var val = $(ele).val() || '';
if (val == '')
return;
var dataclass = $(ele).attr('data-class');
var SearchInText = '';
$.each($(".data:visible"), function () {
SearchInText = $(this).find("td." + dataclass).text();
if (SearchInText.indexOf(val) == -1)
$(this).hide();
});
}
</script>
</body>
</html>