如何使用jQuery从指定JSON数组生成目标结构的HTML表格？

嘿，我明白你现在的困扰——把这个结构的JSON转成指定的HTML表格对吧？没问题，我给你两种实用的解决方案，都是原生JavaScript就能搞定的，不用额外依赖库！

首先先分析下你的JSON结构：它是一个对象，键对应表格的表头，值是对应列的数据集，而且两个数组长度一致，这刚好能一一对应成行数据。

方法一：字符串拼接快速生成 #

这种方式代码简洁，适合数据确定安全（没有用户输入的恶意内容）的场景：

// 你的原始JSON数据
const jsonData = { 
  "Heading 1": ["name 1", "name 2", "name 3"], 
  "Heading 2": ["data 1", "data 2", "data 3"] 
};

// 提取所有表头（对象的键）
const tableHeaders = Object.keys(jsonData);
// 获取数据总行数（取第一个表头对应的数组长度即可）
const totalRows = jsonData[tableHeaders[0]].length;

// 开始构建HTML表格字符串
let tableHtml = '<table><thead><tr>';

// 拼接表头部分
tableHeaders.forEach(header => {
  tableHtml += `<th>${header}</th>`;
});
tableHtml += '</tr></thead><tbody>';

// 拼接每一行的数据
for (let rowIndex = 0; rowIndex < totalRows; rowIndex++) {
  tableHtml += '<tr>';
  // 为每个表头对应列添加数据单元格
  tableHeaders.forEach(header => {
    tableHtml += `<td>${jsonData[header][rowIndex]}</td>`;
  });
  tableHtml += '</tr>';
}

tableHtml += '</tbody></table>';

// 最后把生成的表格插入到页面中（比如body里）
document.body.innerHTML = tableHtml;

方法二：DOM元素创建（更安全） #

如果你的数据可能包含用户输入的内容，这种方式能避免XSS风险，因为用textContent会自动转义特殊字符：

const jsonData = { 
  "Heading 1": ["name 1", "name 2", "name 3"], 
  "Heading 2": ["data 1", "data 2", "data 3"] 
};

// 创建表格核心元素
const table = document.createElement('table');
const thead = document.createElement('thead');
const headerRow = document.createElement('tr');

// 构建表头
Object.keys(jsonData).forEach(headerText => {
  const th = document.createElement('th');
  th.textContent = headerText;
  headerRow.appendChild(th);
});
thead.appendChild(headerRow);
table.appendChild(thead);

// 构建表格主体
const tbody = document.createElement('tbody');
const totalRows = jsonData[Object.keys(jsonData)[0]].length;

for (let rowIndex = 0; rowIndex < totalRows; rowIndex++) {
  const row = document.createElement('tr');
  Object.keys(jsonData).forEach(header => {
    const td = document.createElement('td');
    // 处理可能的缺失数据（如果数组长度不一致的话）
    td.textContent = jsonData[header][rowIndex] || 'N/A';
    row.appendChild(td);
  });
  tbody.appendChild(row);
}

table.appendChild(tbody);

// 将表格添加到页面指定位置
document.body.appendChild(table);

额外提示 #

如果你的JSON中不同列的数组长度可能不一致，可以在获取总行数的时候取最短的数组长度，或者像上面代码里那样用|| 'N/A'来处理缺失的数据，避免出现undefined的情况。

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