我有PHP生成的表，通常一次超过10个。我想使用一个搜索字段来查找与所有表中的输入匹配的行，并仅显示那些行，但是如果表中没有此类行，那么我希望该表隐藏。
我在这里找到了一个很接近的答案https://stackoverflow.com/a/16127730/3435158，这对于隐藏没有匹配行的表非常有用-但是，使用他的代码，与搜索输入匹配的整个表保持可见，我只希望匹配的行可见，而不是整个行表。
编辑：http://jsfiddle.net/jrfUM/113/
我想做的是，如果我在搜索字段中输入“ andrew”，我想得到（希望我现在更加清楚）：
+---------+
| table 1 |
+---------+
| Andrew |
+---------+
+---------+
| table 4 |
+---------+
| Andrew |
+---------+
最佳答案
我设法编辑PSL code并使它可以满足我的需要：http://jsfiddle.net/jrfUM/115/
<input type="text" id="search" />
<table class="tblDetails">
<thead>
<tr><th>Table 1</th></tr>
</thead>
<tbody>
<tr><td>Andrew</td></tr>
<tr><td>John</td></tr>
</tbody>
</table>
<table class="tblDetails">
<thead>
<tr><th>Table 2</th></tr>
</thead>
<tbody>
<tr><td>Jack</td></tr>
<tr><td>Marc</td></tr>
</tbody>
....
$("#search").keyup(function () {
var txtVal = $(this).val();
if (txtVal != "") {
$(".tblDetails").show();
$(".message").remove();
$.each($('.tblDetails'), function (i, o) {
var match = $("td:contains-ci('" + txtVal + "')", this);
match.parent().siblings().hide(); // <<=== [LINE ADD]
if (match.length > 0) $(match).parent("tr").show();
else $(this).hide();
});
} else {
// When there is no input or clean again, show everything back
$("tbody > tr", this).show();
}
if($('.tblDetails:visible').length == 0)
{
$('#search').after('<p class="message">Sorry No results found!!!</p>');
}
});
// 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;
}
});
关于javascript - 使用一个搜索字段通过多个表搜索/过滤行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32435494/