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

Question

需要jQuery和HTML(表)的一点帮助.

请看看我的jsfiddle页面,看看我要尝试做什么.
http://jsfiddle.net/nori2tae/U25EK/

每个TD包含一定的值(从01到06),并且具有与其值相关的CLASS名称和TABLE上方的按钮列表.最初加载页面时,启用所有这些按钮,这意味着所有TABLE DATA都可见.

当我单击打开/关闭按钮时,我希望jQuery观察按钮的ON/OFF状态,如果状态与每个表行的值匹配,我希望jQuery toggleSlide(显示/隐藏)TABLE ROW.(抱歉我的英语不好和解释......)

例如,如果我关闭button01,则会隐藏row1.然后我关闭button4和button6,第5行将被隐藏.依此类推,反之亦然......

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选择器.请帮帮我.

感谢名单.

Answer 1

只需要一行 -

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

见演示

只要文本和行号匹配,这将起作用.