jQuery搜索栏隐藏表格行答案

【问题标题】：JQuery search bar to hide table rowsjQuery搜索栏隐藏表格行
【发布时间】：2015-11-07 03:38:34
【问题描述】：

希望有人能够帮助我解决这个问题。我有一个动态创建的充满信息的表，我正在尝试使用 JQuery 仅显示与搜索栏中输入的内容匹配的行。匹配是每行中的第一个 td。我不确定为什么这不起作用。

JQuery

var $foo = $('#table-name tr input[name="someValue"]');
$('#search').keyup(function() {
var bar = $.trim($(this).val()).toLowerCase();


$foo.parent().parent().show().filter(function() {
    var thud = $(this).val().toLowerCase();
    return !~thud.indexOf(bar);
}).hide();

在搜索栏中输入任何字符时，所有行都会消失，无论是否有任何匹配项。该表的结构如下：

表格

    <table id="table-name">
            <thead>
                <tr>
                    <th>0</th>
                    <th>1</th>
                </tr>
            </thead>
    <c:forEach>
    <form:form id = “{id}”>
                    <tr id="${id2}">
    <td><input type="text" class= “someClass" name= “someValue"> </input></td>
        <td><select class="someClass" name="otherValue"> </select> </td>
    </tr>
    </form:form>
</c:forEach>
</table>

为什么我的 JQuery 行为不正确？

【问题讨论】：

标签： javascript jquery html-table rows

【解决方案1】：

无需重新发明轮子。试试这个：

JQuery 快速搜索：http://deuxhuithuit.github.io/quicksearch/r/examples/

你的 JS 代码变成了：

$('#id_search').quicksearch('table#table_example tbody tr');

查看运行示例：http://jsfiddle.net/ddan/tqhxqwrh/1

【讨论】：

谢谢@BrettC，我修好了。