javascript - 使用 jQuery 切换表格行

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链接

Answer 1

您可以将选择器更改为

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

这将为您span提供与课程button中td的tr课程相关的任何内容parent

更新

如果表格是动态创建的，您可以使用该on()功能而不是单击，如果我理解您的话。

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

这是您想要的 jquery：

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

在这里看小提琴

Answer 2

尝试：

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

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

在这里提琴

Answer 3

用on()试试

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