Как изменить таблицу HTML с помощью JavaScript для увеличения диапазона строк, не вызывая перекомпоновку?

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;что делать при одновременном изменении количества элементов?

---

Редактировать: добавлено 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

1. Попытайтесь настроить отображение элемента таблицы: нет до цикла и восстановить отображение после.
2. Другой вариант - назначить фиксированные размеры и использовать переполнение: скрыто для времени тела цикла.,Это должно изолировать дерево обновлений только по таблице.Теоретически.
3. И последнее - составить HTML таблицы и заменить таблицу целиком - это будет сделано за одну транзакцию.