Question

我有一个表格，我点击父行，显示/隐藏具有某些CSS类的子行。问题是.toggle（）是通过单击父行触发的，我希望仅通过单击带有父行内的类btn的span来触发。

这是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 link

Answer 1

您可以将选择器更改为

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

这将为您提供span中button个td的{{1}} tr parent所有on()

<强>更新

如果表是动态创建的，您可以使用$(function() { $('tr.parent td') .on("click","span.btn", function(){ var idOfParent = $(this).parents('tr').attr('id'); $('tr.child-'+idOfParent).toggle('slow'); }); });功能而不是点击，如果我理解您的话。

我明白你的意思，即使你的问题没有反映出来。我为你更新了小提琴。

这是你想要的jquery：

{{1}}

See the fiddle here

Answer 2

尝试：

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

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

小提琴here

Answer 3

使用 on()

尝试

 $("body").on("click", "tr span.btn", function(event){
     $(this).siblings('.child-'+this.id).toggle('slow');
 });

使用jQuery切换表行

3 个答案: