如何用JavaScript基于对象数组创建可局部重渲染的HTML垂直对比表格

核心思路 #

• 一次性渲染所有动态键对应的表头（<th>）和空数据单元格（<td>），给每个<td>绑定唯一标识（比如data-key）
• 后续更新时，仅通过标识定位对应的<td>替换内容，不重新渲染表头或整个表格

具体实现代码 #

先定义示例数据（替换成你实际的Products和Variants数组即可）：

// 替换为你的实际数据
const Products = [
  { id: 1, name: "纯棉T恤", price: 29.99, stock: 100 },
  { id: 2, name: "加绒卫衣", price: 49.99, stock: 50 }
];

const Variants = [
  { productId: 1, color: "红色", size: "M", sku: "TS-R-M" },
  { productId: 1, color: "蓝色", size: "L", sku: "TS-B-L" },
  { productId: 2, color: "黑色", size: "XL", sku: "HD-B-XL" }
];

1. 初始化表格（渲染表头和空数据单元格）

// 提取Products和Variants中所有唯一的键
function getAllUniqueKeys() {
  const productKeys = new Set(Products.flatMap(item => Object.keys(item)));
  const variantKeys = new Set(Variants.flatMap(item => Object.keys(item)));
  return [...new Set([...productKeys, ...variantKeys])];
}

// 创建垂直表格框架
function initVerticalTable(containerId) {
  const container = document.getElementById(containerId);
  const table = document.createElement('table');
  table.style.borderCollapse = 'collapse';

  const keys = getAllUniqueKeys();
  
  // 为每个键创建表头行
  keys.forEach(key => {
    const row = document.createElement('tr');
    
    const th = document.createElement('th');
    th.textContent = key;
    th.style.border = '1px solid #ccc';
    th.style.padding = '8px';
    th.style.textAlign = 'left';
    
    const td = document.createElement('td');
    td.dataset.key = key; // 绑定标识，用于后续定位更新
    td.style.border = '1px solid #ccc';
    td.style.padding = '8px';
    
    row.appendChild(th);
    row.appendChild(td);
    table.appendChild(row);
  });

  container.appendChild(table);
}

2. 局部更新数据（仅修改<td>内容）

// 根据产品和变体信息更新表格数据
function updateTableData(productId, variantSku) {
  // 获取目标产品和变体
  const product = Products.find(p => p.id === productId);
  const variant = Variants.find(v => v.productId === productId && v.sku === variantSku);
  
  // 合并产品与变体数据
  const combinedData = { ...product, ...variant };
  
  // 遍历数据，更新对应<td>
  Object.keys(combinedData).forEach(key => {
    const td = document.querySelector(`td[data-key="${key}"]`);
    if (td) td.textContent = combinedData[key];
  });
}

3. 调用示例

// 页面加载完成后初始化表格
document.addEventListener('DOMContentLoaded', () => {
  initVerticalTable('table-container');
  
  // 示例：更新产品1的红色M码变体数据
  updateTableData(1, 'TS-R-M');
  
  // 可根据业务逻辑，比如用户选择产品/变体时调用updateTableData
});

对应的HTML容器：

<div id="table-container"></div>

关键说明 #

• getAllUniqueKeys确保表头包含两个数组的所有字段且无重复
• 通过data-key属性精准定位需要更新的单元格，避免重新渲染表头
• 可根据实际需求调整updateTableData的逻辑，比如展示单个产品、单个变体或合并信息

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