使用jQuery 操作table 完成单元格合并的实例

使用jQuery 操作table 完成单元格合并的实例可以通过以下步骤完成：

1. 创建一个HTML表格，并使用colspan和rowspan属性指定单元格所占的列和行数。例如，我们可以创建一个 3x3 的表格，然后将第一行的第一列单元格设置为跨列和跨行，我们可以使用以下代码：

<table>
  <tr>
    <td rowspan="2" colspan="2">合并单元格</td>
    <td>第一行，第三列</td>
  </tr>
  <tr>
    <td>第二行，第三列</td>
  </tr>
  <tr>
    <td>第三行，第一列</td>
    <td>第三行，第二列</td>
    <td>第三行，第三列</td>
  </tr>
</table>

1. 使用jQuery选择器定位需要合并的单元格，并使用attr方法修改单元格的colspan和rowspan属性。例如，我们想将上面创建的表格中的第一行的第一列单元格设置为跨行和跨列，我们可以使用以下代码：

$('td:first').attr('rowspan','2').attr('colspan','2')

这将选择第一个单元格（即第一行的第一列）并设置它的rowspan属性为2和colspan属性为2。

1. 完成单元格合并的实例

<!--HTML代码-->
<table>
  <tr>
    <td rowspan="2" colspan="2">合并单元格</td>
    <td>第一行，第三列</td>
  </tr>
  <tr>
    <td>第二行，第三列</td>
  </tr>
  <tr>
    <td>第三行，第一列</td>
    <td>第三行，第二列</td>
    <td>第三行，第三列</td>
  </tr>
</table>

<!--JS代码-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $('td:first').attr('rowspan','2').attr('colspan','2')
</script>

1. 示例说明

示例1：将指定的单元格合并为一个单元格

HTML代码：

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td colspan="2" rowspan="2">合并单元格</td>
  </tr>
  <tr>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
</table>

JS代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $('tr:eq(1) td:eq(0)').attr('rowspan','2'); // 合并第2行第1列和第3行第1列
  $('tr:eq(1) td:eq(1)').remove(); // 删除第2行第2列
</script>

示例2：将整个表格中需要合并的单元格统一进行合并

HTML代码：

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

JS代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $('td:contains("5")').attr('rowspan','2').attr('colspan','2');
  // 合并第2行第2列和第2行第3列，以及第3行第2列和第3行第3列
  $('tr:eq(1) td:eq(1)').remove();
  $('tr:eq(2) td:eq(1)').remove();
</script>

以上两个示例都是使用jQuery 操作table 完成单元格合并的实例。