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

我已经尝试将细节类移动到TR.我想要的是当有人点击"详细信息"链接时,以下TR应该切换.我在顶级表上放了一个ID,并提醒父母的attr('id'),这是有效的.将".siblings"更改为".find"可以切换所有内容.

谢谢你的帮助.

Answer 1

你的html格式错误,你的jquery没有选择正确的项目...你去了表元素,然后尝试sibbling但没有任何结果.

试试这个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()表行(实际上是需要显示或隐藏的那一行.然后切换那一行.

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

tr.details {
  display: none;
}