在现有行之后插入表行

时间:2012-04-27 17:14:34

标签: javascript html-table

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

我需要将这些表行添加到表中的特定位置。我有一个对表的引用,之后需要添加行(或者在添加新行之后将删除引用的行之前)。使用jQuery这将是非常简单的:

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

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

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

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

转换字符串可以做的是创建一个空div并将字符串设置为innerHTML。它们将转换为DOM,并可通过div childNodes;

访问

然后你可以使用文件片段在其中插入所有DOM元素,使用appendChild()

完成后,您只需插入文档片段,因此实际文档中只有一个插入而不是多个插入。

文档片段http://ejohn.org/blog/dom-documentfragments/

上的一篇好文章