Javascript jQuery表格行切换与按钮关联的显示/隐藏

需要一些关于jQuery和HTML（表）的帮助

请看一下我的JSFIDLE页面，看看我将要做什么。

每个TD都包含一定的值（从01到06），并具有与其值和表上方按钮列表相关的类名。 最初加载页面时，所有这些按钮都将启用，这意味着所有表数据都可见

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

例如，如果关闭button01，则第1行将隐藏。然后我关闭按钮4和按钮6，第5行将被隐藏。依此类推，反之亦然

HTML:

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

Thanx.

只需要一行--

---

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

您也可以使用以下方法，为您的表指定一个id，如“my_table”，以便在页面中有多个表的情况下，它将只影响特定的表。通过使用2,3，您可以引用行号#2和#3应隐藏，而#4、#5表示行号#4和#5应隐藏 展示

---

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

而不是这个

if（$（this）.hasClass（'on'））{$（this）.toggleClass（'on-off'）；}否则{$（this）.toggleClass（'off-on'）；}

您可以简单地使用

$（this）.toggleClass（'on-off'）@PalashMondal是的，你能告诉我真是太好了。我修好了；）谢谢你的快速反应。我应该多解释一下。每个按钮都与表行无关，而是与表数据相关。因此，如果我关闭按钮01，只有第1行将消失。然后我继续关闭按钮03、05、04，第3行将消失。因此，在我的JSFIDLE示例中，当所有按钮都关闭时，row2的时间将消失。我希望这可以解释。如果
row2
不包含
01到06
即所有数字，该怎么办？在这种情况下，你想隐藏它吗？这个例子是从我的项目剪贴画。根据规范，每个表行至少有一个值。@norixxx有趣。我也会尽力回答这个问题。
<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>

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

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

     $("#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();