表格中的滑动选项菜单

发布于 2024-09-25 11:34:46 字数 1199 浏览 6 评论 0原文

我很难思考如何表达这个问题,所以如果没有意义,请告诉我。

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

Name     | Email          | Phone
John Doe | [email protected] | 555-5555
Jane Doe | [email protected] | 555-5555

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

像这样的东西:(

Name     | Email          | Phone
John Doe | [email protected] | 555-5555
^
This is an area that was once hidden
but now is shown.
Jane Doe | [email protected] | 555-5555

胡萝卜只是我显示该区域的假想框的版本)

我所拥有的是我的表格,其中所有行都已填充,并且有一个指向我创建的 js 函数的链接。该函数接受一个id并调用jquery的slideToggle函数。对于我创建的每一行,我还创建了第二行,其中我设置了 display = none。显然这不起作用,因为该表行现在限制为所有其他行的列宽(实际上它只是扩展第一行)。

关于如何执行此操作有什么建议吗?

I'm having a hard time thinking how to word this one, so if it makes no sense, let me know.

I have a table that looks something like this

Name     | Email          | Phone
John Doe | [email protected] | 555-5555
Jane Doe | [email protected] | 555-5555

Now lets say that every listed name is a link. When you click that link, an area appears between the row you're on and the row below it. This new area pushes everything below it down. This new area can't be confined to the structure of the table's columns, can have a greater length than a regular row, but should be confined to the width of the table.

Something like this:

Name     | Email          | Phone
John Doe | [email protected] | 555-5555
^
This is an area that was once hidden
but now is shown.
Jane Doe | [email protected] | 555-5555

(The carrot is just my version of displaying an imaginary box for the area)

What I have so for is my table, with rows all filled and a link to a js function I've created. This function accepts an id and call jquery's slideToggle function. For every row I create, I'm also creating a second row where I set the display = none. Obviously this isn't working because that table row is now restricted to the column widths of all other rows (actually it just expands the first row).

Any suggestions on how to do this?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

一绘本一梦想 2024-10-02 11:34:46

如果表格的单元格宽度固定,您可以使用单元格的 colspan 属性添加一行,其中包含一个单元格跨越所有单元格:

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

If your table is a fixed number of cells wide, you can add a row with a single cell that spans them all using the colspan attribute of the cell:

<tr>
 <td colspan="3">
  <!-- content -->
 </td>
</tr>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文