JS 合并单元格|极客笔记

JS 合并单元格

在网页中，我们经常会看到表格这种形式的数据展示方式。表格里面的数据可能需要进行合并单元格来让数据更加清晰地展示出来。在本文中，我们将使用 JavaScript 来实现合并单元格的功能。

1. 获取表格元素

首先，我们需要获取到要进行单元格合并的表格元素。我们可以通过 document.getElementById 或者 document.querySelector 来获取到表格元素。

// 获取表格元素
const table = document.getElementById('myTable');

2. 合并单元格

接下来，我们可以编写一个函数来实现单元格合并的功能。我们需要传入要合并的行和列的索引信息。

function mergeCells(row, col) {
  const table = document.getElementById('myTable');
  const tr = table.getElementsByTagName('tr');

  // 获取要合并的单元格
  const cell = tr[row].getElementsByTagName('td')[col];

  // 计算合并的行数和列数
  let rowspan = 1;
  let colspan = 1;

  // 合并列
  for (let i = col + 1; i < tr[row].getElementsByTagName('td').length; i++) {
    if (tr[row].getElementsByTagName('td')[i].innerHTML === tr[row].getElementsByTagName('td')[col].innerHTML) {
      colspan++;
    } else {
      break;
    }
  }

  // 合并行
  for (let i = row + 1; i < tr.length; i++) {
    if (tr[i].getElementsByTagName('td')[col].innerHTML === tr[row].getElementsByTagName('td')[col].innerHTML) {
      rowspan++;
    } else {
      break;
    }
  }

  // 设置合并单元格的属性
  cell.setAttribute('rowspan', rowspan);
  cell.setAttribute('colspan', colspan);
}

3. 调用合并单元格函数

最后，我们可以在需要合并单元格的地方调用 mergeCells 函数，传入行和列的索引信息。

mergeCells(1, 1);

示例代码

下面是一个完整的示例代码，展示了如何使用 JavaScript 来合并单元格。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Merge Cells</title>
  <style>
    table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
    }
  </style>
</head>
<body>
  <table id="myTable">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A</td>
      <td>C</td>
      <td>C</td>
    </tr>
    <tr>
      <td>D</td>
      <td>E</td>
      <td>F</td>
    </tr>
  </table>

  <script>
    function mergeCells(row, col) {
      const table = document.getElementById('myTable');
      const tr = table.getElementsByTagName('tr');

      const cell = tr[row].getElementsByTagName('td')[col];

      let rowspan = 1;
      let colspan = 1;

      for (let i = col + 1; i < tr[row].getElementsByTagName('td').length; i++) {
        if (tr[row].getElementsByTagName('td')[i].innerHTML === tr[row].getElementsByTagName('td')[col].innerHTML) {
          colspan++;
        } else {
          break;
        }
      }

      for (let i = row + 1; i < tr.length; i++) {
        if (tr[i].getElementsByTagName('td')[col].innerHTML === tr[row].getElementsByTagName('td')[col].innerHTML) {
          rowspan++;
        } else {
          break;
        }
      }

      cell.setAttribute('rowspan', rowspan);
      cell.setAttribute('colspan', colspan);
    }

    mergeCells(1, 1);
  </script>
</body>
</html>

在上面的示例中，我们使用 JavaScript 来合并了第二行第二列和第三列的单元格，使表格数据更加清晰地展示出来。