时间戳

首页 > 解决方案 > 在隐藏整行的同时搜索表格单元格

javascript - 在隐藏整行的同时搜索表格单元格

问题描述

我有一个如下表：

<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();
        });

标签： javascriptjqueryhtml

解决方案

当前$rows从 this: 返回$('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();

推荐阅读