0

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

我需要在表格中的特定位置添加这些表格行。我有一个对表的引用，需要在之后添加行（或者在添加新行之后，实际上引用的行将被删除）。使用 jQuery 这将非常简单：

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

问题是 newRows html 可能非常非常大，我发现通过 jQuery 插入它们可能需要相当长的时间。仅通过纯 javascript 插入没有 jQuery 的行要快得多。

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

4

3 回答 3

0

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

于 2012-04-27T17:24:55.260 回答
0

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

于 2012-04-27T17:24:58.757 回答
0

转换字符串的方法是创建一个空 div 并将字符串设置为 innerHTML。它们将被转换为 DOM，并且可以通过 div childNodes 访问；

然后你可以使用一个文档片段插入所有的 DOM 元素，使用 appendChild()

完成后，您只需插入文档片段，因此在实际文档上只插入一个而不是多个。

一篇关于文档片段的好文章http://ejohn.org/blog/dom-documentfragments/

于 2012-04-27T17:31:29.540 回答