Question

我已经读过createDocumentFragment比在for循环中逐个向DOM添加元素更快，例如见here。

我想做什么：

在文档片段中创建表列。此列应包含数组中的数字（例如“rating”）。
之后我想用新的列替换现有的列（“片段”列）。所以我可以将整个列全部放到DOM中。

我的问题：

如果现有列已经存在，我无法确定如何替换现有列。另一方面附加是没有问题的。

有用的链接，here和here

HTML

<table id = "table">
    <tr>
        <th>Name</th>
        <th>Rating</th>
    </tr>
    <tr>
        <td>A.H.Hattray </td>
        <td id = "row0"></td>
    </tr>
    <tr>
        <td>Icke_eben </td>
        <td id = "row1"></td>
    </tr>
    <tr>
        <td>John_Doe123 </td>
        <td id = "row2"></td>
    </tr>
</table>

的Javascript

var rating = [1, 10, 3];
var fragment = document.createDocumentFragment();


for (var i = 0, len = rating.length; i < len; i++){ 
    var element = document.createElement('tr');
    element.innerHTML = rating[i];
    fragment.appendChild(element);
}
document.getElementById('table').appendChild(fragment); //I know here should be the code to replace the second column!

Answer 1

列不能一次性放入表中（因此不能作为片段工作）因为列是一大堆行中每一行中的一堆不同的单元格 - 它＆＃ 39;它本身不是一个实体。

为了获得良好的性能，您可以做的一件事是暂时使用display: none隐藏表格，添加所有行/单元格，然后再次显示表格。这应该允许浏览器在每次添加新单元格时避免中间布局问题，并且您应该只重新绘制最终内容。

Answer 2

以下代码演示了可以在 DocumentFragment 中操作现有表。

var rating = [1, 10, 3];
var theTable = document.getElementById('table');
var frag = document.createDocumentFragment();
frag.appendChild(theTable);
var col2 = frag.querySelectorAll('tr td:nth-of-type(2)');
for (var i=0; i < col2.length; i++) {
    col2[i].innerHTML = rating[i];
}
// it is also possible to use insertCell and deleteCell
var theRows = frag.querySelectorAll('tr');
for (var i=0; i < theRows.length; i++) {
    var x = theRows[i].insertCell(1);
    if (i > 0) 
        x.innerHTML = 'new one';
    else
        x.innerHTML = 'The Header';
}
document.body.appendChild(frag);

（使用createElement和appendChild或insertBefore将第一行中的新单元格设为TH元素，而不是TD需要更多工作。“

如果您单步执行此操作，则表格会在附加到片段后从DOM中删除，然后在片段附加到正文时重新出现。

使用createDocumentFragment替换表中的现有列

2 个答案: