在现有行后插入表行

问题描述：

我有一个MVC应用程序，其中一个页面通过ajax调用控制器方法，然后返回一个包含大量表行的局部视图。请注意，不会返回完整的表格，而只是表格行。在现有行后插入表行

我需要将这些表行添加到表中的特定位置。我有一个引用表的行需要添加后（或真正的引用行将被删除后添加新的行）。使用jQuery，这将是可笑的简单：

$(newRows).insertAfter(tr); 
tr.remove();

的问题是，newRows HTML可能是非常非常大的，我已经找到了通过jQuery插入他们可能需要相当长一段时间。插入没有jQuery的行，只需通过纯javascript即可。

我的问题是我不能为我的生活弄清楚如何在给定的表格行之后或之前插入新的行。我试过了insertBefore，insertAfter和appendTo方法，但问题是newRows变量只是一个html字符串而不是实际的DOM节点。有没有办法在引用表行之前或之后插入html，而不必将表格行的html字符串转换为DOM元素？

您可以提供您的问题 – chrismarx 2012-04-27 17:25:20

的例子的jsfiddle的DOM不是一个字符串。为什么不恰当地创建行？ – 2012-04-27 17:33:42

“恰当”是相对的。他们正在正确创建，但他们必须填写数据库中的数据。这是一个ASP.NET MVC应用程序，我正在利用它来返回一个包含所有“正确”形成的表格行的局部视图，这些表格行可以让许多javascript和客户端逻辑创建。 – 2012-04-27 18:40:15

答

您可以尝试返回一个对象数组（json）并使用此数组通过JS创建新行并将它们追加到所需的位置。

这是一种可能性，但生成HTML行需要相当多的逻辑，并且在javascript中复制该逻辑将会非常可怕。 – 2012-04-27 18:40:53

答

您可以使用innerHTML，但在您的情况下需要考虑一下，因为您只需追加行，而不是完全覆盖内容。使用innerHTML总是比DOM操作更快。也许你可以把这些行放在一个新的表中，但是把表放在现有的表下，使它看起来像它的一部分？就个人而言，我很好奇jquery的速度，我发现jquery通常不是问题的根源，更多的是如何使用 -

文档片段建议也很好，如果您使用我建议的innerHTML方法，这是很自然的方法 - – chrismarx 2012-05-02 14:25:38

答

你可以做些什么来转换你的字符串是创建一个空的div并将该字符串设置为innerHTML。他们将被转换为DOM，并可通过div childNodes访问;

然后你可以使用一个文档片段插入其中的所有DOM元素，使用的appendChild（）

如果这样做了，你只需要插入您的文档片段，所以只有一个插入，而不是多一个实际的文档。

好的工件上的文档片段http://ejohn.org/blog/dom-documentfragments/

在现有行后插入表行

相关推荐