如何将横向表格转换为纵向表格？附代码求助

原代码核心问题 #

• 循环每一行数据就生成独立表格，最终输出多个分散的表格，不符合需求
• 采用横向排版逻辑，未实现表头-数据对应的纵向键值对结构

修正后的代码 #

// CREATE THE DATA TABLE
function createTable(dataArray) {
  const div = document.getElementById('search-results');
  if (!dataArray || dataArray.length === 0) {
    div.innerHTML = "Data not found!";
    return;
  }

  // 定义表头数组，与原硬编码表头对应
  const headers = [
    'Timestamp',
    'Work Order',
    'Cable/Wire/Tube SAP Part Number',
    'Measurement Record',
    'Equipment ID'
  ];

  // 初始化表格结构，只创建一个表格容器
  let result = `<table class='table table-sm table-striped' id='dtable' style='font-size:0.5em'>
    <thead style='white-space: nowrap'>
      <tr>
        <th colspan=2><center><img src='' style='width:80px;margin-top:8px'><br><br></center></th>
      </tr>
    </thead>
    <tbody>`;

  // 遍历每一行数据，生成纵向键值对行
  dataArray.forEach(rowData => {
    headers.forEach((header, index) => {
      result += `<tr>
        <td><strong>${header}</strong></td>
        <td>${rowData[index] || ''}</td>
      </tr>`;
    });
    // 可选：不同数据行之间添加分隔线
    result += `<tr><td colspan=2><hr style='margin: 10px 0; border: none; border-top: 1px solid #ddd'></td></tr>`;
  });

  // 移除最后一条分隔线（如果添加了的话）
  result = result.replace(/<tr><td colspan=2><hr.*?<\/td><\/tr>$/, '');
  
  result += `</tbody></table>`;
  div.innerHTML = result;
}

关键修改说明 #

1. 统一表格容器：只创建一个表格，避免循环生成多个独立表格
2. 纵向结构生成：遍历表头和对应数据，将每个表头与数据放在同一行的两个单元格中，实现纵向排版
3. 数据容错处理：添加rowData[index] || ''避免空数据导致的显示异常
4. 逻辑优化：提前获取目标DOM元素，简化空数据判断逻辑

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