表格中的滑动选项菜单

时间:2010-09-30 22:56:20

标签: javascript jquery-ui tabular

我很难想到如何说出这个,所以如果没有意义,请告诉我。

我有一个看起来像这样的表

Name     | Email          | Phone
John Doe | jdoe@email.com | 555-5555
Jane Doe | jdoa@email.com | 555-5555

现在让我们说每个列出的名称都是一个链接。单击该链接时,您所在的行与其下方的行之间会出现一个区域。这个新区域推动了它下面的一切。这个新区域不能局限于表格列的结构,可以比常规行具有更大的长度,但应该限制在表格的宽度内。

这样的事情:

Name     | Email          | Phone
John Doe | jdoe@email.com | 555-5555
^
This is an area that was once hidden
but now is shown.
Jane Doe | jdoa@email.com | 555-5555

(胡萝卜只是我展示该地区虚构框的版本)

我所拥有的是我的表,所有行都填满了,并且链接到我创建的js函数。此函数接受id并调用jquery的slideToggle函数。对于我创建的每一行,我也创建了第二行,我设置了display = none。显然这不起作用,因为该表行现在仅限于所有其他行的列宽(实际上它只是展开第一行)。

有关如何执行此操作的任何建议吗?

1 个答案:

答案 0 :(得分:0)

如果您的表格是一个固定数量的单元格宽度,您可以使用单元格的colspan属性添加一个包含单个单元格的行:

<tr>
 <td colspan="3">
  <!-- content -->
 </td>
</tr>