来创建表格。和元素。然而，有时需要结构更复杂的表格。挑战：创建特定的表格结构
假设您有一个 JavaScript 函数，可以创建一个包含 3 行的表格每行 2 个单元格。如何调整此函数来创建下表：
<code class="html"><table>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></code>
解决方案：使用 rowSpan 进行行合并
要创建具有合并单元格的表格，您需要使用 rowSpan 属性。以下是修改代码的方法：
JavaScript 代码：
<code class="javascript">function tableCreate() {
const body = document.body;
const tbl = document.createElement('table');
for (let i = 0; i < 3; i++) {
const row = document.createElement('tr');
for (let j = 0; j < 2; j++) {
if (i === 2 && j === 1) {
continue;
} else {
const cell = document.createElement('td');
cell.textContent = `Cell I${i}/J${j}`;
if (i === 1 && j === 1) {
cell.setAttribute('rowspan', '2');
}
row.appendChild(cell);
}
}
tbl.appendChild(row);
}
body.appendChild(tbl);
}
tableCreate();</code>
说明：
- rowSpan 属性被添加到第二行的第二个单元格，并将其与下面的单元格合并。
- 具有 rowSpan 的单元格在 j === 1 迭代中被跳过，以防止重复的单元格。
使用 insertRow 和 insertCell 改进的简码：
<code class="javascript">function tableCreate() {
const body = document.body;
const tbl = document.createElement('table');
tbl.style.width = '100px';
tbl.style.border = '1px solid black';
for (let i = 0; i < 3; i++) {
const tr = tbl.insertRow();
for (let j = 0; j < 2; j++) {
if (i === 2 && j === 1) {
break;
} else {
const td = tr.insertCell();
td.appendChild(document.createTextNode(`Cell I${i}/J${j}`));
td.style.border = '1px solid black';
if (i === 1 && j === 1) {
td.setAttribute('rowSpan', '2');
}
}
}
}
body.appendChild(tbl);
}
tableCreate();</code>
此改进版本使用 insertRow 和 insertCell 方法来实现更简洁的实现。
