jQuery切换表中的下一行

Question

我不知道为什么这不起作用。

HTML

<table>
<tr>
  <th>Name</th>
  <th>Options</th>
</tr>
<?php // loop over items
while ($row = mysql_fetch_assoc($qry)){ ?>
  <tr>
    <td><?=$row['name'];?></td>
    <td<a href="#" class="trigger">Detail</a></td>
  </tr>
  <tr>
    <td colspan="100%" class="details">
    stuff
    </td>
  </tr>
  <?php
} ?>
</table>

那么我使用的jQuery是..。

$(document).ready(function () {  
  $('.trigger').click(function() {
    $(this).parents("table").siblings(".details").slideToggle();
    // also tried this...
    // $(this).parents("table").nextAll(".details").slideToggle();
    return false;
  });
});  

我已经尝试将details类移动到TR。我想要的是，当有人点击“详细信息”链接时，下面的TR应该切换。我已经在最上面的桌子上放了一个ID，并提醒了parent的attr('id')，这就起作用了。将".siblings“更改为".find”可将它们全部切换。

谢谢你的帮助。

Answer 1

您的html格式不正确，您的jquery没有选择正确的项目...您转到table元素，然后尝试兄弟元素，但没有得到任何结果。

试试这个html：

<table>
<tr>
  <th>Name</th>
  <th>Options</th>
</tr>
<?php // loop over items
while ($row = mysql_fetch_assoc($qry)){ ?>
  <tr>
    <td><?=$row['name'];?></td>
    <td><a href="#" class="trigger">Detail</a></td>
  </tr>
  <tr class="details">
    <td colspan="2">
    stuff
    </td>
  </tr>
  <?php
} ?>
</table>

还有这个jquery：

$(function(){
  $('.trigger').click(function() {
    $(this).parents("tr").next().slideToggle();
    return false;
  });
});

工作示例：http://jsfiddle.net/saelfaer/Z6MzS/

编辑只是为了提到我所做的更改

您有一个缺少>的<td>打开标记，而且，我将class="details"移到了要显示/隐藏的<tr>元素中。

在jquery中，我将选择器向上移至表，改为向上移至表行，并选择了.next()表行(这实际上是需要显示或隐藏的行。然后切换到那个。

你可以做的改进:首先通过css隐藏tr.details槽

tr.details {
  display: none;
}