javascript - 使用jquery以最优化的方式复制表格的一部分

Question

我正在使用 JQuery 来操作我无权修改服务器端的页面。我需要做的主要事情之一是创建页面上其中一个表格的一个子部分的副本。更具体地说，我需要创建 2 个表，一个是表前两行的副本，另一个是第一列。

在尽可能优化之后，我对行复制的性能相当满意，但列复制仍然有点慢。

我有以下内容，其中 sourceTable 是原始表，titleColBody 是之前创建的新表的主体:

sourceTable.find("tr").each(function(){
   titleColBody.append(
      $("<tr></tr>").append($(this).children(":first").clone())
   );
});

在一个大约有 50 行和大量列的表上，这大约需要在 IE8 中为 350 毫秒。并不可怕，但如果可能的话，我想降低一点。

我的问题是在 JQuery 中是否有更有效的方法。

同样，我创建了表格前两行的副本，如下所示。

headerTable.find("tbody")
   .append(sourceTable.find("tr:eq(0)").clone())
   .append(sourceTable.find("tr:eq(1)").clone());

这相当快，但是如果有更好的方法，我会很高兴听到。

任何优化都将不胜感激。

Answer 1

看起来这对于列来说可能会快一点，这样您将只获取一个资源集而不是获取两组(一组用于 TR，然后一组用于子 TD):

sourceTable.find("tr > td:first-child").each(function(){
    titleColBody.append($("<tr></tr>").append($(this).clone()));
});

另请注意，如果“titleColBody”是指向 DOM 对象的指针，导致浏览器在更新时必须呈现页面，则最好附加到 documentFragment，然后附加该片段(因此浏览器只会重新呈现一次)。

例如:

var titleCol = document.createDocumentFragment();
sourceTable.find("tr > td:first-child").each(function(){
    titleCol.append($("<tr></tr>").append($(this).clone()));
});
titleColBody.append(titleCol);