如何使用jQuery基于列结构数组动态生成完整HTML表格

数据老陈

2026-10-10

注：你给出的原始数组示例中最后一列的属性名写错为value，实际应为values，和其他列保持一致即可正常运行。

实现方案

你当前的数组是列优先存储结构，每个对象对应完整一列的配置和数据，要渲染表体只需要先拿到总行数，再按行索引遍历取值即可，不需要强制转换结构，以下是可直接运行的代码：

const exampleArray = [
  {
    header: 'ID',
    values: [1, 2]
  },
  {
    header: 'First Name',
    values: ['John', 'Jayne']
  },
  {
    header: 'Last Name',
    values: ['Doe', 'Doe']
  }
];

const header = $('#results thead tr');
const body = $('#results tbody');

// 生成表头（你原有逻辑不变）
exampleArray.forEach((col) => {
  header.append($(`<th>${col.header}</th>`));
});

// 新增：生成表体
const rowCount = exampleArray[0]?.values.length || 0;
for (let rowIdx = 0; rowIdx < rowCount; rowIdx++) {
  const tr = $('<tr>');
  // 遍历所有列，取当前行索引对应的值
  exampleArray.forEach(col => {
    tr.append(`<td>${col.values[rowIdx]}</td>`);
  });
  body.append(tr);
}

可选：转成更通用的行优先结构

如果你后续需要对表格数据做增删改、排序、筛选等操作，可以先把列优先结构转成大家更熟悉的行优先结构，转换逻辑如下：

const rowCount = exampleArray[0]?.values.length || 0;
// 转换后的结构：[{ID:1, "First Name":"John", "Last Name":"Doe"}, {ID:2, ...}]
const rowData = Array.from({length: rowCount}, (_, idx) => {
  return exampleArray.reduce((row, col) => {
    row[col.header] = col.values[idx];
    return row;
  }, {});
});

// 转换后渲染表体逻辑：
rowData.forEach(item => {
  const tr = $('<tr>');
  Object.values(item).forEach(val => tr.append(`<td>${val}</td>`));
  body.append(tr);
})