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

Question

需要在jQuery和HTML(table)方面进行一些帮助。

请查看我的jsfiddle页面，了解我要尝试做什么。
http://jsfiddle.net/nori2tae/U25EK/

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

当我单击打开/关闭按钮时，我希望jQuery观察按钮的ON/OFF状态，如果状态与每个表行的值匹配，我希望jQuery切换(show/hide)TABLE ROW。 (对不起，我的英语和解释很差...)

例如，如果我关闭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选择器。请帮帮我。

谢谢。

- norixxx

---

你可以使用 $(this).toggleClass('on off'); 来代替这段代码：if( $(this).hasClass('on') ) { $(this).toggleClass('on off'); } else { $(this).toggleClass('off on'); } - palaѕн

@PalashMondal 是的，你能告诉我这个问题真是太好了。我已经修复了 ;) 谢谢 - norixxx

Answer 1

需要一行文字 --

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

查看演示

只要文本和行号匹配，这个方法就可以使用。

- SachinGutte

---

感谢您的快速回复。我应该解释得更清楚一些。每个按钮与表格数据相关，而不是表格行。因此，如果我关闭button01，只有row1会消失。然后我继续关闭button03、05、04，row3也会消失。所以在我的jsfiddle示例中，当所有按钮都关闭时，时间行2将消失。希望这样解释清楚了。 - norixxx

如果 row2 不包含 01 到 06 的任何数字，那么你也想要隐藏它吗？ - SachinGutte

这个例子是我项目中的一个剪裁。根据规格说明，每个表行至少有一个值。 - norixxx

@norixxx 很有趣。我也会尝试回答。 - SachinGutte

Answer 2

您还可以像下面这样做，给您的表格一个id，例如"my_table"，这样在页面上有多个表格的情况下，它仅会影响特定的表格。通过使用2,3，您可以引用第二行和第三行应该隐藏，而#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();

在任何一个点击事件中调用它并进行检查。

- Rikin Adhyapak