jquery - 切换表的 tr 不起作用

Question

这是我的演示代码

我想禁用td此内容'CLICKING MUST BE DISABLE'并单击'CLICK HEAR 1'可以正常工作，但不能正常工作'CLICK HEAR 2'

查询：

$("#chart tr:odd").addClass("odd");

$("#chart tr.odd").click(function()
    {
  $(this).next("tr").toggle();
});

HTML：

<table id="chart">
    <tbody>
    <tr class="odd">
        <td height="25" width="200px"><b>TABLE 1</b>&nbsp;</td>
        <td colspan="6">CLICKING MUST BE DISABLE</td>
    </tr>   
    <tr class="odd">
        <td style="padding-right: 30px;" width="100px"></td>
        <td style="background-color: rgb(237, 237, 237);" width="200px">CLICK HEAR 1</td>
        <td height="25">
        </td>
    </tr>   
    <tr style="display: none;">
       <td></td>
       <td colspan="4">
                 sssss<br>sssss<br>sssss<br>sssss<br>sssss<br>sssss<br>sssss<br>sssss<br>   
        </td>
    </tr>
    <tr class="odd">
        <td height="25" width="200px"><b>TABLE 2</b>&nbsp;</td>
        <td colspan="6">CLICKING MUST BE DISABLE</td>
    </tr>   
    <tr>
        <td style="padding-right: 30px;" width="100px"></td>
        <td style="background-color: rgb(237, 237, 237);" width="200px">CLICK HEAR 2</td>
        <td height="25">
        </td>
    </tr>   
    <tr class="odd" style="display: none;">
       <td></td>
       <td colspan="4">
                 sssss<br>sssss<br>sssss<br>sssss<br>sssss<br>sssss<br>sssss<br>sssss<br>   
        </td>
    </tr>
    </tbody>
</table>

Answer 1

您正在使用:odd选择器，但您要选择的行不是奇数行。

1. 必须禁用单击
2. 点击这里 1
3. 必须禁用单击
4. 点击这里 2

以下 jsFiddle 显示了一个工作示例：http: //jsfiddle.net/2rDww/

我已经手动将odd类添加到应该可以点击的两行。您可以删除将奇数类添加到所有奇数行的第一行。

Answer 2

这是您的 HTML（简化版）：

<tr class="odd">
    <td>CLICK HEAR 1</td>
</tr>

<tr>
    <td>CLICK HEAR 2</td>
</tr>

这是您的点击功能

$("#chart tr.odd").click(function() {
    $(this).next("tr").toggle();
});

它正在寻找所有tr带有 class 的 's odd：tr你的 HTML 中的第一个有它，但你的第二个没有（这就是它不起作用的原因）。您尝试通过 JavaScript 添加这些类：

$("#chart tr:odd").addClass("odd");

但这是在点击处理程序之后应用的。

解决方案可能是您将odd类添加到您的 secondtr中，但最动态的方法是简单地更改您的选择器以使用odd过滤器而不是类：

$("#chart tr:odd").click(function() {
    $(this).next("tr").toggle();
});

附言。它是“这里”，而不是“听到”；）。