Jquery隐藏一个表的行但不隐藏另一个表的行

标签 jquery

我对 JQuery 比较陌生。我借用了下面 fiddle 上的代码(抱歉没有引用作者,但我不知道代码来自哪里)并对其进行了轻微修改以实现我的总体目标。

我基本上有两张表,一张有 id 和 class,一张没有。我无法轻松地为非 id/class 表提供 id/class,因为我在另一个应用程序中使用 JQuery 并且没有那么多控制权。

我想要的是搜索功能仅搜索和过滤非 id/class 表(下面/ fiddle 中的第一个表)。因此,在这个 fiddle 的情况下,我希望搜索功能来搜索/过滤不是 id="myTable"class="test1"(第一个表)的表。现在它会过滤两者。

我不知道这段代码是否是最好的,所以我愿意接受建议。谢谢!

<label for="kwd_search">Search:</label> <input type="text" id="kwd_search" value=""/>
<table border="1" style="border-collapse:collapse">
    <thead>
        <tr>
            <th>Name</th>
            <th>Sports</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Sachin Tendulkar</td>
            <td>Cricket</td>
            <td>India</td>
        </tr>
        <tr>
            <td>Tiger Woods</td>
            <td>Golf</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Maria Sharapova</td>
            <td>Tennis</td>
            <td>Russia</td>
        </tr>
    </tbody>
</table>
<br>
 <table id="myTable" class="test1" border="1" style="border-collapse:collapse">
    <thead>
        <tr>
            <th>Name2</th>
            <th>Sports2</th>
            <th>Country2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Sachin Tendulkar2</td>
            <td>Cricket2</td>
            <td>India2</td>
        </tr>
        <tr>
            <td>Tiger Woods2</td>
            <td>Golf2</td>
            <td>USA2</td>
        </tr>
        <tr>
            <td>Maria Sharapova2</td>
            <td>Tennis2</td>
            <td>Russia2</td>
        </tr>
    </tbody>
</table>

fiddle :http://jsfiddle.net/aPLLF/66/

最佳答案

您可以使用 not() 排除具有 ID 的表...

$("table").not($("#myTable"));

这将返回除具有指定 ID 的表之外的所有表。

不过,看看您的示例代码,这就是您需要更新才能使其正常工作的全部内容...

$("table:not(#myTable) tbody>tr").hide();

关于Jquery隐藏一个表的行但不隐藏另一个表的行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18641143/

相关文章:

javascript - 为什么 jQuery 不向该元素添加数据属性?

javascript - 窗口调整大小功能不适用于标题导航

javascript - 获取刚刚从 jQuery Chosen 多选元素中选择的值

javascript - 使用phonegap js 无需编译应用程序即可访问 native 功能?

javascript - jQuery find() 方法不适用于一个(!)类

javascript - jquery点击功能聚焦于textarea?

jquery - 仅显示列表中的最后一个数组

javascript - 在隐藏的 div 中滑动

javascript - JS 添加 Action 改变类

javascript - JavaScript 和 jQuery 中的 this 和 function