0

特定の CSS クラスで子行を表示/非表示にする親行をクリックするテーブルがあります。問題は、親行をクリックすると .toggle() がトリガーされ、親行内にあるクラス btn でスパンをクリックすることによってのみトリガーされたいということです。

これは HTML です:

<table cellpadding="5" cellspacing="3" border="1">
  <tbody>
    <tr class="parent" id="2479">
      <td><span class="btn">text</span></td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
    </tr>
    <tr class="child-2479">
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
    </tr>
    <tr>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
    </tr>
    </tbody>
</table>

このjQuery：

$(function() {
    $('tr.parent')
        .click(function(){
            $(this).siblings('.child-'+this.id).toggle('slow');
        });
    $('tr[class^=child-]').hide().children('td');
});

ここにjsfiddleリンクがあります

4

3 に答える 3

2

セレクターを次のように変更できます。

$('tr.parent td span.btn').click(function(){...});

これにより、クラス内のクラス内の任意のクラスが取得さspanれますbuttontdtrparent

アップデート

テーブルが動的に作成されている場合、on()私があなたを正しく理解していれば、クリックの代わりに関数を使用できます。

あなたの質問はそれを反映していませんが、あなたの言いたいことはわかります。私はあなたのためにフィドルを更新しました。

これはあなたが望むjqueryです：

$(function() {
    $('tr.parent td')
        .on("click","span.btn", function(){
            var idOfParent = $(this).parents('tr').attr('id');
            $('tr.child-'+idOfParent).toggle('slow');
        });
});

ここでフィドルを参照してください

于 2012-11-19T09:28:07.500 に答える
1

試す：

$("tr.parent > td").on( "click", "span.btn", function() {

    var childId = $(this).parents("tr").prop("id");
    $("tr.child-" + childId).toggle("slow");
});

ここでフィドル

于 2012-11-19T09:29:46.823 に答える
0

on()で試してみてください

 $("body").on("click", "tr span.btn", function(event){
     $(this).siblings('.child-'+this.id).toggle('slow');
 });
于 2012-11-19T09:37:32.597 に答える