Question

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

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

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

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

在一个包含大约50行和大量列的表格中，这需要约。 IE8中350ms。并不可怕，但如果可能，我想尽量减少这一点。

我的问题是，是否有更有效的方法在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);

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

1 个答案: