javascript - 使用 createDocumentFragment 替换表中的现有列

Question

我读到 createDocumentFragment 比在 for 循环中将元素逐一附加到 DOM 更快，例如请参阅here 。

我想做的事情:

1. 在文档片段中创建表列。此列应包含数组中的数字(例如“评级”)。
2. 之后，我想用新列(“片段”列)替换现有列。这样我就可以将整个列一次性放入 DOM 中。

我的问题:

如果已有列，我真的不知道如何替换现有列。另一方面，追加是没有问题的。

我的JSfiddle:http://jsfiddle.net/LEqG9/2/

有用的链接，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

以下代码演示了可以操作 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);

(使第一行中的新单元格成为 TH 元素，而不是 TD 需要更多的工作，使用 createElement 和 appendChild 或 insertBefore.)

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