2020年多级表头和行列合并头不再是难题

2024-01-17 00:31:20

前言

多级表头和行列合并头在网页中很常见，但对于前端开发人员来说，实现起来却并不容易。传统的实现方法通常需要使用复杂的HTML和CSS代码，而且很难实现跨浏览器兼容。

如今，随着HTML和CSS标准的不断发展，以及JavaScript的日益强大，实现多级表头和行列合并头已经变得更加容易。本文将向您展示如何使用这些技术轻松实现多级表头和行列合并头。

HTML实现

首先，我们需要使用HTML创建一个基本的表格结构。

<table>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
    <tr>
      <td>数据4</td>
      <td>数据5</td>
      <td>数据6</td>
    </tr>
  </tbody>
</table>

这个简单的表格结构包含了一个表头和两行数据。接下来，我们需要使用CSS来美化表格并实现多级表头和行列合并头。

CSS实现

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 5px;
}

th {
  text-align: center;
}

thead {
  background-color: #f9f9f9;
}

tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

.rowspan {
  vertical-align: middle;
}

.colspan {
  text-align: center;
}

这段CSS代码将表格美化并实现了基本的表格样式。接下来，我们需要使用JavaScript来实现多级表头和行列合并头。

JavaScript实现

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

// 获取表头元素
const thead = table.querySelector('thead');

// 获取数据行元素
const tbody = table.querySelector('tbody');

// 创建多级表头
const newThead = document.createElement('thead');
const newTr = document.createElement('tr');
const newTh1 = document.createElement('th');
const newTh2 = document.createElement('th');
const newTh3 = document.createElement('th');
newTh1.setAttribute('colspan', '2');
newTh2.setAttribute('rowspan', '2');
newTh3.setAttribute('rowspan', '2');
newTh1.textContent = '表头1';
newTh2.textContent = '表头2';
newTh3.textContent = '表头3';
newTr.appendChild(newTh1);
newTr.appendChild(newTh2);
newTr.appendChild(newTh3);
newThead.appendChild(newTr);

// 将多级表头添加到表格中
thead.parentNode.insertBefore(newThead, thead);

// 创建行列合并头
const newTbody = document.createElement('tbody');
const newTr1 = document.createElement('tr');
const newTd1 = document.createElement('td');
const newTd2 = document.createElement('td');
const newTr2 = document.createElement('tr');
const newTd3 = document.createElement('td');
const newTd4 = document.createElement('td');
newTd1.setAttribute('colspan', '2');
newTd2.setAttribute('rowspan', '2');
newTd3.setAttribute('colspan', '2');
newTd4.setAttribute('rowspan', '2');
newTd1.textContent = '数据1';
newTd2.textContent = '数据2';
newTd3.textContent = '数据3';
newTd4.textContent = '数据4';
newTr1.appendChild(newTd1);
newTr1.appendChild(newTd2);
newTr2.appendChild(newTd3);
newTr2.appendChild(newTd4);
newTbody.appendChild(newTr1);
newTbody.appendChild(newTr2);

// 将行列合并头添加到表格中
tbody.parentNode.insertBefore(newTbody, tbody);