JS实现动态修改table及合并单元格的方法示例

讲解 "JS实现动态修改table及合并单元格的方法示例" 的完整攻略：

1. 修改表格内容

1.1 获取表格

首先，我们需要在 HTML 中添加一个表格，并且通过 JS 获取到它。可以使用 document.getElementById() 或 document.querySelector() 方法获取表格。

<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
    <th>职业</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>18</td>
    <td>男</td>
    <td>学生</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>22</td>
    <td>男</td>
    <td>工人</td>
  </tr>
</table>

const myTable = document.getElementById('myTable');
// 或
const myTable = document.querySelector('#myTable');

1.2 创建新行、新列并添加到表格

我们可以使用 createElement() 方法和 appendChild() 方法来创建新行、新列并添加到表格中。

const newRow = document.createElement('tr');

const newCell1 = document.createElement('td');
newCell1.innerText = '王五';

const newCell2 = document.createElement('td');
newCell2.innerText = '25';

const newCell3 = document.createElement('td');
newCell3.innerText = '女';

const newCell4 = document.createElement('td');
newCell4.innerText = '教师';

newRow.appendChild(newCell1);
newRow.appendChild(newCell2);
newRow.appendChild(newCell3);
newRow.appendChild(newCell4);

myTable.appendChild(newRow);

在这个例子中，我们创建了一个新行 newRow，并创建了四列 newCell1、newCell2、newCell3、newCell4，并将它们添加到了新行中。最后，我们使用 appendChild() 方法将新行添加到表格中。

2. 合并单元格

2.1 合并行

要合并表格中的行，我们需要设置 rowSpan 属性。例如，如果我们要将第一行的第一列和第二列合并：

const row1 = myTable.rows[0]; // 取得第一行
const cell1 = row1.cells[0]; // 取得第一列
cell1.rowSpan = 2; // 合并两行

在这个例子中，我们将第一行的第一列合并到第二行中，因此设置 rowSpan 属性为 2，表示跨越两个行。

2.2 合并列

合并表格中的列与合并行类似，也是设置 colSpan 属性。例如，如果我们要将第一行的第一列和第二列合并：

const row1 = myTable.rows[0]; // 取得第一行
const cell1 = row1.cells[0]; // 取得第一列
const cell2 = row1.cells[1]; // 取得第二列
cell1.colSpan = 2; // 合并两列
row1.removeChild(cell2); // 删除第二列

在这个例子中，我们将第一行的第一列和第二列合并到一个单元格中，因此设置 colSpan 属性为 2，表示跨越两个列。同时，我们需要删除第二列，因为它已经合并到第一列中了。

以上是关于 "JS实现动态修改table及合并单元格的方法示例" 的详细讲解。