如何用JS将指定JSON数据转换为符合规则的HTML表格？

核心逻辑 #

• 遍历JSON中的accepted和processed两个数组，为每个元素生成表格行
• 对每个元素的db字段做判断：
  • 若db === 0：对应单元格显示-，状态列显示yes
  • 若db为其他值：显示db本身的值，状态列显示NO

方式一：通过DOM元素生成表格（推荐，便于后续操作） #

先模拟测试用的JSON数据：

const data = {
  accepted: [
    { db: 0, id: 1 },
    { db: 5, id: 2 },
    { db: 0, id: 3 }
  ],
  processed: [
    { db: 3, id: 4 },
    { db: 0, id: 5 },
    { db: 7, id: 6 }
  ]
};

实现代码：

function generateTableFromJSON(jsonData) {
  // 创建表格核心元素
  const table = document.createElement('table');
  const thead = document.createElement('thead');
  const tbody = document.createElement('tbody');

  // 构建表头
  const headerRow = document.createElement('tr');
  headerRow.innerHTML = '<th>类型</th><th>DB值显示</th><th>状态</th><th>ID</th>';
  thead.appendChild(headerRow);
  table.appendChild(thead);

  // 处理accepted数组
  jsonData.accepted.forEach(item => {
    const row = document.createElement('tr');
    // 填充各列内容
    row.innerHTML = `
      <td>已接受</td>
      <td>${item.db === 0 ? '-' : item.db}</td>
      <td>${item.db === 0 ? 'yes' : 'NO'}</td>
      <td>${item.id}</td>
    `;
    tbody.appendChild(row);
  });

  // 处理processed数组
  jsonData.processed.forEach(item => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>已处理</td>
      <td>${item.db === 0 ? '-' : item.db}</td>
      <td>${item.db === 0 ? 'yes' : 'NO'}</td>
      <td>${item.id}</td>
    `;
    tbody.appendChild(row);
  });

  table.appendChild(tbody);

  // 给表格加基础样式，避免太难看
  table.style.borderCollapse = 'collapse';
  table.querySelectorAll('th, td').forEach(cell => {
    cell.style.border = '1px solid #ccc';
    cell.style.padding = '8px';
    cell.style.textAlign = 'center';
  });

  return table;
}

// 调用函数并把表格添加到页面
const table = generateTableFromJSON(data);
document.body.appendChild(table);

方式二：直接生成HTML字符串（适合静态展示） #

function generateTableHTML(jsonData) {
  let html = `
    <table style="border-collapse: collapse;">
      <thead>
        <tr>
          <th style="border:1px solid #ccc; padding:8px; text-align:center;">类型</th>
          <th style="border:1px solid #ccc; padding:8px; text-align:center;">DB值显示</th>
          <th style="border:1px solid #ccc; padding:8px; text-align:center;">状态</th>
          <th style="border:1px solid #ccc; padding:8px; text-align:center;">ID</th>
        </tr>
      </thead>
      <tbody>
  `;

  // 处理accepted数组
  jsonData.accepted.forEach(item => {
    const dbDisplay = item.db === 0 ? '-' : item.db;
    const status = item.db === 0 ? 'yes' : 'NO';
    html += `
      <tr>
        <td style="border:1px solid #ccc; padding:8px; text-align:center;">已接受</td>
        <td style="border:1px solid #ccc; padding:8px; text-align:center;">${dbDisplay}</td>
        <td style="border:1px solid #ccc; padding:8px; text-align:center;">${status}</td>
        <td style="border:1px solid #ccc; padding:8px; text-align:center;">${item.id}</td>
      </tr>
    `;
  });

  // 处理processed数组
  jsonData.processed.forEach(item => {
    const dbDisplay = item.db === 0 ? '-' : item.db;
    const status = item.db === 0 ? 'yes' : 'NO';
    html += `
      <tr>
        <td style="border:1px solid #ccc; padding:8px; text-align:center;">已处理</td>
        <td style="border:1px solid #ccc; padding:8px; text-align:center;">${dbDisplay}</td>
        <td style="border:1px solid #ccc; padding:8px; text-align:center;">${status}</td>
        <td style="border:1px solid #ccc; padding:8px; text-align:center;">${item.id}</td>
      </tr>
    `;
  });

  html += `
      </tbody>
    </table>
  `;
  return html;
}

// 调用函数并插入到页面
const tableHTML = generateTableHTML(data);
document.body.innerHTML = tableHTML;

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