要更改 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
是从中提取范围的元素)。
最佳答案
- 尝试让表格元素显示:none 在循环之前并恢复 之后显示。
- 另一个选择是分配 固定尺寸和用途 溢出:循环体期间隐藏。 这应该通过以下方式隔离更新树 仅表。从理论上讲。
- 最后是编写 HTML 表并将表替换为 整体 - 这将是单一的 交易。
关于javascript - 如何使用 JavaScript 修改 HTML 表格以增加行跨度,而不引起回流?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5850397/