jQuery搜索欄隱藏表行

Question

希望有人能夠幫助我。 我有一個充滿信息的動態創建的表，我試圖使用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行為不正確？

Answer 1

無需重新發明輪子。 試試這個：

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

您的JS代碼不會超過：

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

參見運行示例： http : //jsfiddle.net/ddan/tqhxqwrh/1