javascript - jquery表搜索；如何让搜索忽略可切换行并防止自动切换？

Question

这是一个表的示例，其中输入表单位于可切换的隐藏行内，我试图使其正常运行。

如您所见，我隐藏了包含文本输入和提交按钮的行。

当您在搜索输入中输入关键字时，过滤器会展开隐藏行，如果您清除搜索输入，过滤器也会展开所有隐藏行。

我需要能够让搜索功能不展开/显示隐藏行，但当您单击投票链接显示该行时仍然可以访问隐藏行。

当输入新搜索时，让搜索功能隐藏先前已切换的任何隐藏/显示行也很好。

https://jsfiddle.net/zoo6mvso/1/

<input type="text" id="search" placeholder="Type to search">
<table id="table">
    <tr>
        <th><b>Item</b>
        </th>
        <th><b>Price (Dollars)</b>
        </th>
        <th><b>Price (Euros)</b>
        </th>
        <th><b>Vote</b>
        </th>
    </tr>
    <tr>
        <td>Cheese Burger</td>
        <td>&nbsp;</td>
        <td>20</td>
        <td><a href="#" class="toggler" data-prod-cat="1">Vote</a>
        </td>
    </tr>
    <tr class="cat1" style="display:none">
        <td colspan="4" style="white-space: nowrap">Enter Cheeseburger Price:
            <input type="text" maxlength="4" name="quantity" value="" class="input" />&nbsp;<a href="#" class="submit" type="submit" value="Submit">Submit</a>
        </td>
    </tr>
    <tr>
        <td>Burrito</td>
        <td>&nbsp;</td>
        <td>20</td>
        <td><a href="#" class="toggler" data-prod-cat="2">Vote</a>
        </td>
    </tr>
    <tr class="cat2" style="display:none">
        <td colspan="4" style="white-space: nowrap">Enter Burrito Price:
            <input type="text" maxlength="4" name="quantity" value="" class="input" />&nbsp;<a href="#" class="submit" type="submit" value="Submit">Submit</a>
        </td>
    </tr>
    <tr>
        <td>Pizza</td>
        <td>&nbsp;</td>
        <td>10</td>
        <td><a href="#" class="toggler" data-prod-cat="3">Vote</a>
        </td>
    </tr>
    <tr class="cat3" style="display:none">
        <td colspan="4" style="white-space: nowrap">Enter Pizza Price:
            <input type="text" maxlength="4" name="quantity" value="" class="input" />&nbsp;<a href="#" class="submit" type="submit" value="Submit">Submit</a>
        </td>
    </tr>
    <tr>
</table>

<小时/>

$(document).ready(function(){
var $rows = $('#table tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

    $(".toggler").click(function(e){
        e.preventDefault();
        $('.cat'+$(this).attr('data-prod-cat')).toggle();
    });
});

Answer 1

找到 tr elemnet 时，不要选择隐藏的 tr 元素

var $rows = $('#table tr:not(:hidden)');

演示:Fiddle

<小时/>

另一种选择是将一个类添加到隐藏的 tr 中，例如

<tr class="cat1 hidden" style="display:none">

然后

var $rows = $('#table tr:not(.hidden)');

演示:Fiddle