javascript - 如何使用 JavaScript 修改 HTML 表格以增加行跨度，而不引起回流？

Question

要更改 HTML 表格，以便某些单元格具有 rowspan="n"(以增加行跨度)，您必须删除正在扩展的单元格下方的 n 个单元格。

原始 HTML 源代码(HTML 结构)如下所示

<table border="1">
<tr id="1"><td>1</td><td>Zubenelgenubi</td></tr>
<tr id="2"><td>2</td><td>Algorab</td></tr>
<tr id="3"><td>3</td><td>Almach</td></tr>
<tr id="4"><td>4</td><td>Alula_Borealis</td></tr>
<tr id="5"><td>5</td><td>Rigil_Kentaurus</td></tr>
<tr id="6"><td>6</td><td>Menkent</td></tr>
</table>

我喜欢把它改成这样:

<table border="1">
<tr id="1"><td>1</td><td>Zubenelgenubi</td></tr>
<tr id="2"><td>2</td><td>Algorab</td></tr>
<tr id="3" rowspan="3"><td>3</td><td>Almach</td></tr>
<tr id="4">          <td>Alula_Borealis</td></tr>
<tr id="5">          <td>Rigil_Kentaurus</td></tr>
<tr id="6"><td>6</td><td>Menkent</td></tr>
</table>

不幸的是，SO 格式不支持表格，无论是 Markdown 还是 HTML。

是否可以在不引起不必要的回流的情况下做到这一点？我的意思是这里的东西比简单的更好

for (var i = 0; i < numlines; i++) {
   ...
   if (i === 0) {
      td.rowSpan = numlines;
      ...
   } else {
      tr.deleteCell(0); // or td.parentNode.removeChild(td);
   }
}

我认为这会在每次迭代后导致回流。

添加元素时可以使用DocumentFragment；一次修改多个元素时该怎么办？

<小时/>

编辑:于 2011 年 3 月 5 日添加
使用 Range 的解决方案对象(W3C DOM 版本)

var range = document.createRange();
range.setStartBefore(document.getElementById(start+''));
range.setEndBefore(document.getElementById(start+numlines+''));

var fragment = range.cloneContents();

for (var i = 0; i < numlines; i++) {
    var rownum = start + i;
    var row = fragment.getElementById(rownum.toString()); // not always work

    var td = row.firstChild;
    if (i === 0) {
        td.style.backgroundColor = 'yellow';
        td.rowSpan = num.toString();
    } else {
        td.parentNode.removeChild(td);
    }

}
range.deleteContents();

var rowAfter = document.getElementById(start+num+'');
rowAfter.parentNode.insertBefore(fragment, rowAfter);

请注意，由于某种原因 fragment.getElementById 对我不起作用，所以我不得不欺骗知道那里有哪些节点。

需要

deleteContents + insertBefore ，因为 table.replaceChild(range,fragment); 不起作用，不幸的是(其中 table 是从中提取范围的元素)。

Answer 1

1. 尝试让表格元素显示:none在循环之前并恢复之后显示。
2. 另一个选择是分配固定尺寸和用途溢出:循环体期间隐藏。这应该通过以下方式隔离更新树仅表。从理论上讲。
3. 最后是编写 HTML表并将表替换为整体 - 这将是单一的交易。