jQuery Table 行切换显示/隐藏与按钮关联答案

【问题标题】：jQuery Table row toggle show/hide associated with buttonsjQuery Table 行切换显示/隐藏与按钮关联
【发布时间】：2026-01-27 17:45:01
【问题描述】：

在 jQuery 和 HTML(table) 方面需要一点帮助。

请看一下我的 jsfiddle 页面，看看我要做什么。
http://jsfiddle.net/nori2tae/U25EK/

每个 TD 包含特定的值（从 01 到 06）并具有与其值相关的 CLASS 名称和 TABLE 上方的按钮列表。当页面最初加载时，所有这些按钮都被启用，这意味着所有 TABLE DATA 都是可见的。

当我单击打开/关闭按钮时，我希望 jQuery 观察按钮的打开/关闭状态，如果状态与每个表格行的值匹配，我希望 jQuery 切换滑动（显示/隐藏）表格行. （对不起我糟糕的英语和解释......）

例如，如果我关闭 button01，则 row1 将被隐藏。然后我关闭button4和button6，row5将被隐藏。以此类推，反之亦然……

HTML：

<ul id="listBtns">
<li><a href="#" class="on">01</a></li>
<li><a href="#" class="on">02</a></li>
<li><a href="#" class="on">03</a></li>
<li><a href="#" class="on">04</a></li>
<li><a href="#" class="on">05</a></li>
<li><a href="#" class="on">06</a></li>
</ul>

<table id="tblResult">
<thead>
    <tr>
        <th></th>
        <th>01</th>
        <th>02</th>
        <th>03</th>
        <th>04</th>
        <th>05</th>
        <th>06</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th>row1</th>
        <td class="val01">01</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th>row2</th>
        <td class="val01">01</td>
        <td class="val02">02</td>
        <td class="val03">03</td>
        <td class="val04">04</td>
        <td class="val05">05</td>
        <td class="val06">06</td>
    </tr>
    <tr>
        <th>row3</th>
        <td class="val03">03</td>
        <td class="val05">05</td>
        <td class="val04">04</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th>row4</th>
        <td class="val02">02</td>
        <td class="val04">04</td>
        <td class="val05">05</td>
        <td class="val06">06</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th>row5</th>
        <td class="val04">04</td>
        <td class="val06">06</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th>row6</th>
        <td class="val03">03</td>
        <td class="val02">02</td>
        <td class="val04">04</td>
        <td class="val06">06</td>
        <td class="val05">05</td>
        <td></td>
    </tr>
</tbody>
</table>

JS：

$('#listBtns a').click(function() {
    $(this).toggleClass('on off');
    //and some function continues...
});

我有点堆栈，只能提出非常糟糕和低效的代码（可能无法完全工作......）而且我不知道要使用哪个 jQuery 选择器。请帮帮我。

谢谢。

【问题讨论】：

您可以简单地使用$(this).toggleClass('on off'); 而不是这个if( $(this).hasClass('on') ) { $(this).toggleClass('on off'); } else { $(this).toggleClass('off on'); }
@PalashMondal 是的，你很高兴让我知道这一点。我修好了；）谢谢

标签： javascript jquery html css

【解决方案1】：

只需要一行 --

$(function() {
    $('#listBtns a').click(function() {
       $(this).toggleClass('on off');        
       $("#tblResult tr").eq($(this).text()).toggle('on off');
    });
});

See demo

只要文本和行号匹配，这将起作用。

【讨论】：

感谢您的快速回复。我应该解释更多。每个按钮与 TABLE ROW 无关，而是与 TABLE DATA 相关。所以如果我关闭 button01 只有 row1 会消失。然后我继续关闭button03、05、04，row3就会消失。所以在我的 jsfiddle 示例中，当所有按钮都关闭时，时间 row2 将消失。我希望能解释清楚。
如果row2 不包含01 to 06 即所有数字怎么办？在那种情况下你也想隐藏它？
这个例子是从我的项目中截取的。根据规范，每个表格行至少有一个值。
@norixxx 很有趣。我也会试着回答。

【解决方案2】：

你也可以使用类似下面的东西，给你的表一个id，比如“my_table”，这样如果一个页面中有多个表，它只会影响特定的表。并且通过使用 2,3 您可以参考行号 #2 和 #3 应该隐藏和 #4，#5 表示行号 #4 和 #5 应该是显示。

     $("#my_table tr:nth-child(2)").hide();
     $("#my_table tr:nth-child(3)").hide();

     $("#my_table tr:nth-child(4)").show();
     $("#my_table tr:nth-child(5)").show();

在任何事物的点击事件上调用它并检查。

【讨论】：