如何在JavaScript循环中处理带rowspan的表格行？

下面结合JSON数据、JavaScript和HTML，分享几个实现自定义表格的实用技巧：

1. 先做数据预处理，搞定单元格合并 #

如果你的表格需要合并单元格（比如同分类的行合并分类列），先对JSON数据做分组统计是关键。把相同分类的数据归为一组，统计每组的条目数，就能给第一个单元格设置rowspan属性，跳过后续行的对应单元格。

示例代码：

// 模拟的JSON数据
const tableData = [
  { category: "电子产品", item: "手机", price: "3999" },
  { category: "电子产品", item: "电脑", price: "8999" },
  { category: "生活用品", item: "毛巾", price: "29" },
  { category: "生活用品", item: "牙刷", price: "19" }
];

<!-- HTML容器 -->
<table id="customTable" border="1">
  <thead>
    <tr>
      <th>分类</th>
      <th>商品</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody id="tableBody"></tbody>
</table>

// 按分类分组数据
const groupedData = {};
tableData.forEach(item => {
  groupedData[item.category] = groupedData[item.category] || [];
  groupedData[item.category].push(item);
});

const tbody = document.getElementById('tableBody');
const fragment = document.createDocumentFragment();

// 循环生成行
Object.entries(groupedData).forEach(([category, items]) => {
  items.forEach((item, idx) => {
    const tr = document.createElement('tr');
    // 仅在组内第一行添加分类单元格并设置rowspan
    if (idx === 0) {
      const categoryTd = document.createElement('td');
      categoryTd.textContent = category;
      categoryTd.rowSpan = items.length;
      tr.appendChild(categoryTd);
    }
    // 生成商品和价格单元格
    const itemTd = document.createElement('td');
    itemTd.textContent = item.item;
    const priceTd = document.createElement('td');
    priceTd.textContent = item.price;
    tr.append(itemTd, priceTd);
    fragment.appendChild(tr);
  });
});

tbody.appendChild(fragment);

2. 用模板字符串简化DOM生成 #

如果觉得createElement写起来繁琐，直接用ES6模板字符串拼接HTML代码会更直观，适合结构不那么复杂的表格。

示例代码：

let tbodyHtml = '';
let currentCategory = '';
let categoryRowCount = 0;

tableData.forEach(item => {
  if (item.category !== currentCategory) {
    currentCategory = item.category;
    // 统计当前分类的行数
    categoryRowCount = tableData.filter(i => i.category === currentCategory).length;
    tbodyHtml += `
      <tr>
        <td rowspan="${categoryRowCount}">${currentCategory}</td>
        <td>${item.item}</td>
        <td>${item.price}</td>
      </tr>
    `;
  } else {
    // 后续行只生成非合并的单元格
    tbodyHtml += `
      <tr>
        <td>${item.item}</td>
        <td>${item.price}</td>
      </tr>
    `;
  }
});

document.getElementById('tableBody').innerHTML = tbodyHtml;

3. 动态添加类名实现样式自定义 #

如果需要给特定行/单元格加样式（比如高亮高价商品），可以在生成DOM的时候动态添加类名，再配合CSS控制样式。

示例代码：

// 生成行时判断价格，添加类名
if (parseInt(item.price) > 1000) {
  tr.classList.add('high-price-row');
}

.high-price-row {
  background-color: #fff3cd;
  font-weight: 500;
}

4. 用文档片段优化性能 #

如果表格数据量较大，每次循环都直接把元素追加到页面会导致多次DOM重绘，影响性能。用DocumentFragment先把所有行存起来，最后一次性追加到页面，能有效减少重绘次数。（这个技巧已经在第一个示例里用到）

5. 处理多级表头 #

如果是多级表头的需求，直接通过colspan合并表头单元格即可，然后JS循环生成的内容对应表头结构就行。

示例HTML表头：

<thead>
  <tr>
    <th colspan="2">商品详情</th>
    <th>价格信息</th>
  </tr>
  <tr>
    <th>分类</th>
    <th>名称</th>
    <th>单价</th>
  </tr>
</thead>

内容的提问来源于stack exchange，提问作者HiDayurie Dave