在 css div 表上使用 jQuery 扩展表行

发布于 2024-12-11 23:07:28 字数 521 浏览 0 评论 0原文

我需要在表上建立一个包含基本信息(例如姓名)的人员列表,当有人单击该行时,它将在单击的行和下一行之间消耗详细信息。

有关更直观的示例,请参阅 jExpand jQuery 插件 正是这样做的,但是是在常规的 html 表格上。

这是带有代码的jsfiddle

我的目标是当我点击Alice的在 Alice 和 Bernard 之间创建了一个新的 div。

这个新的 div 必须具有表格的宽度。这是一件大事。 CSS 表中没有 colspan。

我正在考虑一个占位符虚拟行,顶部有第二个绝对 div,但无法真正找到任何优雅的方法来做到这一点。

I need to build a list of people with basic informations on a table, like name, and when one clicks the row it will expend details between the clicked row and the next one.

For a more visual example see jExpand jQuery plug-in which does exactly that, but on a regular html table.

Here is a jsfiddle with the code

My goal is when I click on Alice's name a new div is created between Alice and Bernard.

This new div must be of the width of the table. And this is the big deal. No colspan in css table.

I'm thinking of a place holder dummy row with a second absolute div on top but can't really figure any elegant way to do it.

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

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

发布评论

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

评论(3

北凤男飞 2024-12-18 23:07:28

像这样的东西吗? http://jsfiddle.net/95aZb/

Something like this? http://jsfiddle.net/95aZb/

是伱的 2024-12-18 23:07:28

最后想出了一些不那么优雅但有效的东西。

查看此 jsFiddle
(使用“加载详细信息”按钮,然后单击一行)

仍然有一些缺点,例如无法使用 jQuery 的 slipToggle() 而不是toggle()。
如果有人有解决方案滑动具有绝对定位子元素的元素,请告诉我。

我希望它能帮助别人:)

Finally came up with something not so elegant but working.

See this jsFiddle
(Use the "load details" button and then click on a row)

Still have some draw backs thought, like the impossibility to use jQuery's slideToggle() instead of toggle().
If anybody have a solution sliding an element with an absolutely positioned child, let me know.

I hope it will help somebody else :)

青萝楚歌 2024-12-18 23:07:28

这是我今天遇到的第三个“css div table”问题。答案是“使用桌子”。

使用 div 创建相同的内容作为表格

<一href="https://stackoverflow.com/questions/7927078/how-to-create-this-css/7927100#7927100">如何创建这个CSS?

This is the third "css div table" question I've come across today. The answer is "use a table".

creating the same thing with divs as tables

how to create this css?

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