如何遍历JSON对象生成HTML表格的tr与td标签？

首先准备好基础的HTML表格结构：

<table id="userTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>邮箱</th>
      <th>状态</th>
      <th>锁定次数</th>
      <th>最后登录时间</th>
    </tr>
  </thead>
  <tbody id="tableBody">
    <!-- 动态生成的行将插入此处 -->
  </tbody>
</table>

前提说明 #

如果你的数据是JSON字符串格式（比如从后端获取的响应），需要先通过JSON.parse()转换成JavaScript对象数组；如果已经是对象数组（比如示例中的users变量），可以直接使用。

方法一：原生JavaScript（基础DOM操作） #

适合新手理解每一步的元素创建逻辑：

// 若数据是JSON字符串，先解析：
// const users = JSON.parse('[{"fullname":"Bob Wirth","email":"Bob @mydomain.com",...}]');

const tableBody = document.getElementById('tableBody');

// 遍历每个用户对象
users.forEach(user => {
  // 创建表格行
  const row = document.createElement('tr');

  // 逐个创建单元格并填充内容
  const nameCell = document.createElement('td');
  nameCell.textContent = user.fullname;
  row.appendChild(nameCell);

  const emailCell = document.createElement('td');
  emailCell.textContent = user.email;
  row.appendChild(emailCell);

  const statusCell = document.createElement('td');
  statusCell.textContent = user.status;
  row.appendChild(statusCell);

  const lockCell = document.createElement('td');
  lockCell.textContent = user.lockcnt;
  row.appendChild(lockCell);

  const loginCell = document.createElement('td');
  loginCell.textContent = user.lastlogin;
  row.appendChild(loginCell);

  // 将行添加到表格主体
  tableBody.appendChild(row);
});

方法二：原生JavaScript（模板字符串，更简洁） #

用模板字符串拼接HTML，代码更紧凑，批量插入DOM性能更优：

const tableBody = document.getElementById('tableBody');
let rowsHtml = '';

users.forEach(user => {
  rowsHtml += `
    <tr>
      <td>${user.fullname}</td>
      <td>${user.email}</td>
      <td>${user.status}</td>
      <td>${user.lockcnt}</td>
      <td>${user.lastlogin}</td>
    </tr>
  `;
});

// 一次性插入所有生成的行
tableBody.innerHTML = rowsHtml;

额外提示 #

• 若用户对象存在属性缺失的情况，可以添加默认值处理，比如${user.fullname || '-'}，避免单元格为空。
• 确保遍历的属性顺序和表头列顺序一致，防止内容错位。

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