如何创建显示在表格行下方的 div答案

【问题标题】：How to create a div that apears below a table row如何创建显示在表格行下方的 div
【发布时间】：2011-05-18 16:49:37
【问题描述】：

就像在这个演示中一样

http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/nestedviewtemplate/defaultcs.aspx

除了在此演示中，它被添加为附加行。（单击“>”之一并检查页面源，它在表中添加了一个新行）。如果我使用这种策略，使用标准的 Jquery 插件（如 table sorter）很难排序。

想法？

【问题讨论】：

我是否清楚我想要做什么？我有一个 DIV，就像整个蓝色区域一样，我想显示，就像他们在演示中所做的那样，当一行展开时，它出现在展开行的“内部”，就像它在演示中一样，没有向表中添加另一行。
你是半清楚的，假设你想通过在行之间添加一个 div（或某种不是表格行的块）来“拆分”一个表格，如果这不正确，那么没有你'不清楚;）如果这是正确的，那么答案是你必须在另一行或内部使用另一行（使用 colspan 并将新的 div 表拉伸到整个宽度）或打破表 - 正如 patrick dw 在他的回答中所说只有tr 可以是table 的孩子
@claire - 不幸的是，你做对了。我正在寻找不涉及将另一个标记添加到表中的任何解决方案。
( 比我的投票保留@patricks 答案.. 即使您可以以某种方式将 div 放置在桌子上（右行下方），您仍然需要扩大行的高度以腾出空间div，因此以下行仍然可见，就好像它们已向下移动一样。计算行的高度以匹配 div 内容可能有效，但即使可以确定定位，表格行高也很狡猾。 .也许可以通过偏移来找到位置并扩大行高

【解决方案1】：

离开并考虑了我的评论，关于查找行高和覆盖 div.. 它是如此接近，但我不是 jQuery 高手，所以也许有人可以帮助整理一下

如果 div/row 在打开下一个之前关闭，我让它在正确的位置显示/隐藏 div。但是如果在打开 div 时单击按钮 2 则不正确@987654322 @位置（它得到的是行在展开后的位置，而不是原来的行位置），我敢肯定一定有办法在行没有展开的情况下获得该位置并存储它？？

无论如何，我知道它很冗长，变量明智，因为我只能应用 CSS 逻辑 - 我对 js 或 jquery 函数和存储了解不够。我还想如果我解释我如何获得我的变量以及需要哪些变量，这可能会帮助那些知道如何让它变得更好的人；）

输入/按钮没有文本，但它们是点击触发器
position() 可能不是正确的使用方法，它需要 div 能够找到相关行的原始位置（在 table-wrap div 内？）
?

here's the Example

【讨论】：

【解决方案2】：

你不能。 <div> 不是 <table> 或 <tbody> 的有效子代。您需要使用<tr>。

我不知道该插件是如何工作的，但也许支持对多个 <tbody> 元素进行排序，这将允许您对行集进行分组。

【讨论】：

是的，我知道我不能将 div 元素添加到 tr，这就是问题所在。我想我正在寻找另一种解决方案...将其添加到该行中的并以某种方式定位它？不，它甚至不支持客户端排序，所以每次排序时都必须重新加载内部窗格，我不想这样做。

【解决方案3】：

div 位于 td 内，在您单击 > 之前它是隐藏的

这是一个演示：http://jsfiddle.net/maniator/7RLhL/1/

【讨论】：

我喜欢它的声音，但我不知道如何放置它以提供与演示相同的视觉效果？
是的，这就是演示的作用，只是它添加了 tr 标签，而不是显示它。问题是，我只需要一个 tr 标签（总计，对于数据行和细节 div）；以便它与表格排序器等 JQuery 插件兼容。（否则我将不得不编写自己想要避免的排序函数。
不幸的是，这可能是唯一的方法
无法在行中添加额外的，并使用 css 使其看起来像这样？
你可以试试，玩弄小提琴，但我不认为你会得到任何地方

【解决方案4】：

我不知道你能不能做到。像在表格中那样放置标签不是有效的 (X)HTML，因此可能不会给您想要的效果

【讨论】：

【解决方案5】：

如果你看那个演示，他们在第一个下面使用第二个

和一个跨越大部分列的。

【讨论】：

是的，我知道，这就是我在我的问题中想说的。

【解决方案6】：

您可以在每个不可见的描述单元格下的表格单元格中嵌入详细信息表，并使其在单击时可见： http://jsfiddle.net/bouillard/QmK4Z/

【讨论】：

仍然有额外的 tr 标签...这会弄乱预先构建的排序器
好的，我明白了，但是在你的链接中，排序应该在服务器端完成
我添加了一个排序按钮（只是颠倒顺序，但可以更改）

【解决方案7】：

正如在其他答案中提到的，我们不能在表中添加一个 div，而不会将它放在 TD 中。但是，可以做一些事情来将 div 放在行上。为了使 div 显示在行内，我们可以在显示 div 时增加行的高度。这是非常基本的demo。由于 div 并不真正在表格内，如果表格恰好排序，您可能希望隐藏 div 或将其重新定位到新的 TR 位置。它会带来自己的挑战，但您可以尝试一下，看看它是否适合您。

【讨论】：

【解决方案8】：

我有个主意。真的很丑。我能想到的唯一想法是在对行进行排序之前，分离额外的行（使用 div）并使用 JQuery 以某种方式存储它。然后在排序完成后将行（带有 div）重新附加到正确的位置。

这可能，不，我应该说会，很快就会变得丑陋，尤其是分页和过滤......

【讨论】：

或者我想我可以编写自己的排序函数来考虑额外的行...