Question

要更改HTML表格以便某些单元格已经给出rowspan =“n”（以增加rowspan），您必须删除正在扩展的单元格下面的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>

不幸的是，格式化不支持表格，既不支持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;一次修改元素数量时该怎么办？

编辑已添加03-05-2011
使用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

尝试使表格元素显示：无在循环之前恢复显示之后。
另一个选择是分配固定尺寸和用途溢出：隐藏了循环体的时间。这应该隔离更新树仅限表格。理论上。
最后一个是撰写HTML 该表并将表替换为整体 - 这将是单一的事务。

如何使用JavaScript修改HTML表以增加行数，而不会导致重排？

1 个答案: