javascript实现可以合并拆分的表格

下面是一个简单的JavaScript实现，可以实现合并和拆分表格的功能：

HTML代码：

<table id="myTable">
  <tr>
    <td rowspan="2">1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td colspan="2">4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
</table>

<button onclick="mergeCells()">合并单元格</button>
<button onclick="splitCells()">拆分单元格</button>

JavaScript代码：

// 获取表格
var table = document.getElementById("myTable");

// 合并单元格
function mergeCells() {
  var rows = table.rows;
  var cells = null;
  var rowspan = 0;
  for (var i = 0; i < rows.length; i++) {
    cells = rows[i].cells;
    for (var j = 0; j < cells.length; j++) {
      if (cells[j].rowSpan > 1) {
        rowspan = cells[j].rowSpan;
        for (var k = 1; k < rowspan; k++) {
          cells[j + k].style.display = "none";
        }
      }
      if (cells[j].colSpan > 1) {
        for (var k = 1; k < cells[j].colSpan; k++) {
          cells[j + k].style.display = "none";
        }
      }
    }
  }
}

// 拆分单元格
function splitCells() {
  var rows = table.rows;
  var cells = null;
  for (var i = 0; i < rows.length; i++) {
    cells = rows[i].cells;
    for (var j = 0; j < cells.length; j++) {
      cells[j].style.display = "";
    }
  }
}

在上面的代码中，我们首先通过getElementById()方法获取表格对象。然后，我们定义了两个函数：mergeCells()和splitCells()。

mergeCells()函数用于合并单元格。我们遍历每一行和每一列，判断当前单元格是否有rowspan或colspan属性，如果有，我们就隐藏接下来的单元格。这样就可以实现单元格的合并。

splitCells()函数用于拆分单元格。我们同样遍历每一行和每一列，将之前被隐藏的单元格重新显示出来，以实现单元格的拆分。

最后，在HTML代码中，我们添加了两个按钮，分别调用mergeCells()和splitCells()函数。当用户点击这两个按钮时，就可以实现表格的合并和拆分了。