如何在表格中间动态添加元素到网页

Question

我有一个具有客户搜索功能的管理网页。我输入名称和匹配客户的表（以及每个的有限数量的相关数据）使用ajax注入页面。我希望能够点击一个客户（一排）并显示客户的个人资料。配置文件可能包含多个元素，表单，按钮和复杂功能。

我不希望将此配置文件放在单独的页面或其他内容上，而是希望将其直接注入我点击的位置（在客户的行下方），然后在完成后关闭备份。

我尝试将这些元素添加到DOM中，但是标记之间的任何内容都作为表的一部分出现（所有这些都被压缩到一个单元格中）。我应该先以某种方式拆分桌子吗？或者不首先使用桌子？

我正在寻找一个强大的解决方案，因为我还需要在网站的其他部分“插入模块”。

Answer 1

如果您希望数据以内嵌方式显示（推送其他内容）
我会在您的客户（或替换它）之后添加第二个<tr> <td> colspan设置为填充表格宽度的display:none。然后，您可以在不再需要此行时删除或{{1}}。

如果您希望数据显示重叠（覆盖其他内容）
我会使用JavaScript来确定行中第一个TD的屏幕坐标，并在该位置放置一个绝对定位的div。 （这类似于丰富内容的“工具提示”。）

如果用户可以合理地希望将“配置文件”中的数据与屏幕上已有的数据进行比较，我会亲自使用第一个用户。如果不是这样的话，我会使用第二种解决方案，以最小化页面上的内容发生变化（以便用户保持定向）。

Answer 2

去年我做了类似的实施。

与其他人的建议相反，我认为添加行不是一个好主意。原因是您希望使用event delegation来处理用户点击，添加行会搞砸或至少使您的实施变得复杂。

我的选择是在现有客户行中插入一个表。覆盖图或工具提示将提供更清晰的实现，但只有在您一次只需要扩展一个客户时才能使用。