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

【问题标题】：Expanding table row with jQuery on a css div table在 css div 表上使用 jQuery 扩展表行
【发布时间】：2011-10-27 11:58:34
【问题描述】：

我需要在表格上建立一个包含基本信息的人员列表，例如姓名，当一个人点击该行时，它将在点击的行和下一行之间展开详细信息。

有关更直观的示例，请参阅jExpand jQuery plug-in，它确实可以做到这一点，但在常规 html 表上。

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

这个新的 div 必须是表格的宽度。这是最重要的。 css 表中没有 colspan。

我正在考虑一个占位符虚拟行，顶部有第二个绝对 div，但真的想不出任何优雅的方式来做到这一点。

【问题讨论】：

也许你使用了一些javascript代码？或者jsfiddle.net链接？
只是想知道，你为什么不使用桌子？
是的，忘记提了。我在这里给了你简单的版本。但显然我里面还有很多东西，它不是“数据表格显示”意义上的表格。例如，在每一行我都有一个导航盘和一些状态信息。我可以使用绝对的表格，但由于它只用于行扩展的东西，其他解决方案是最受欢迎的。
@AlexandreRavey 我不确定这是否可能。但祝你好运找到答案。我会放弃并使用表格：D
@RichardD 挑战已接受！ :)

【解决方案1】：

这样的？ http://jsfiddle.net/95aZb/

【讨论】：

【解决方案2】：

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

See this jsFiddle （使用“加载详细信息”按钮，然后单击一行）

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

我希望它会帮助别人:)

【讨论】：

【解决方案3】：

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

【讨论】：

我同意你的观点，表格是为表格数据制作的，而 div 可能不会在任何地方都使用，只是为了使用 div 而不是表格。这真的不是一张只有 4 列的简单表格，还有很多其他的事情让我无法进入真正的表格。但即使在找到解决方案（见我的回答）之后，我也会考虑去表，还有很多其他问题需要先解决。