Question

我有一个如下表：

<table>
    <tr>
        <td>Title</td>
        <td>
            Description<br>
            <input type="text" id="search" placeholder="Search description text">
        </td>
        <td>Active</td>
    </tr>
    <tr>
        <td>Apple</td>
        <td name="descSearch">It's a fruit</td>
        <td>Active</td>
    </tr>
    <tr>
        <td>Pear</td>
        <td name="descSearch">It's also fruit</td>
        <td>No</td>
    </tr>
</table>

我正在使用一些代码搜索description列，并在其中不包含要搜索的内容时将其隐藏。问题是只有td被隐藏了。我尝试更改选择器以设置$row，但随后它在我指定的所有单元格中进行了搜索。仅搜索description时如何隐藏整行？这是我用来搜索的内容：

var $rows = $('td[name=descSearch]');
        $('#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();
        });

Answer 1

当前$rows从以下位置返回：$('td[name=descSearch]')，它是单元格的集合。最终，这就是您所说的.hide()。无需更改搜索逻辑，只需在调用<tr>之前选择最接近的.hide()。为了在您的.show()调用中包含相同的逻辑，您可能需要在两个调用中进行相同的操作。

类似这样的东西：

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

隐藏整个行时搜索表格单元格

1 个答案: