jquery - テーブルのトグル tr が機能しない

Question

ここに私のデモコードがあります

このコンテンツで「CLICKING MUST BE DISABLE」を無効にしたいのですがtd、「CLICK HEAR 1」をクリックすると正しく機能しますが、「CLICK HEAR 2」が機能しません

Jクエリ:

$("#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クリック可能にする必要がある 2 つの行にクラスを手動で追加しました。奇数クラスをすべての奇数行に追加する最初の行を削除できます。

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();
});

trclass を持つすべての を探していますodd: HTML の最初のtrものにはそれがありますが、2番目のものにはありません (それが機能していない理由です)。JavaScript を使用してこれらのクラスを追加しようとすると、次のようになります。

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

しかし、それはクリック ハンドラーの後に適用されます。

odd解決策として、クラスを 2 番目の に追加することが考えられますがtr、最も動的な方法oddは、クラスの代わりにフィルターを使用するようにセレクターを変更することです。

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

Ps。「聞く」ではなく「ここ」です; ) .