如何在AJAX jQuery动态生成的表格中正确迭代展示数据？

问题根源 #

你遇到的问题通常是因为在循环外部创建了单个<tr>元素，导致所有数据的单元格都被追加到同一个表格行中，没有为每条数据生成独立的行。

错误代码示例（问题重现） #

$.ajax({
  url: 'your-data-api',
  dataType: 'json',
  success: function(data) {
    // 错误：仅创建一次行，所有单元格都追加到这里
    const row = $('<tr></tr>');
    $.each(data, function(index, item) {
      row.append(`<td>${item.id}</td>`);
      row.append(`<td>${item.itemName}</td>`);
      row.append(`<td>${item.price}</td>`);
    });
    $('#table-body').append(row);
  }
});

正确实现方案 #

1. 基础HTML表格结构

先在页面中定义好带表头的表格框架：

<table id="data-table" border="1" cellpadding="8" cellspacing="0">
  <thead>
    <tr>
      <th>ID</th>
      <th>商品名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody id="table-body"></tbody>
</table>

2. 修正后的AJAX+jQuery代码

核心是为每条数据创建独立的<tr>，并将对应单元格追加到当前行，再把整行插入表格主体：

$.ajax({
  url: 'your-data-api',
  dataType: 'json',
  success: function(data) {
    // 清空表格主体，避免重复加载数据
    $('#table-body').empty();
    
    // 遍历每条数据，生成对应行
    $.each(data, function(index, item) {
      // 为当前数据创建新行
      const row = $('<tr></tr>');
      // 向行中添加对应列的单元格
      row.append(`<td>${item.id}</td>`);
      row.append(`<td>${item.itemName}</td>`);
      row.append(`<td>${item.price}</td>`);
      // 将整行追加到表格主体
      $('#table-body').append(row);
    });
  },
  error: function(xhr, status, err) {
    console.error('数据加载失败:', err);
  }
});

关键注意事项 #

• 每次遍历数据时必须创建新的<tr>元素，确保每条数据对应独立行
• 调用empty()清空tbody，防止多次AJAX请求导致数据重复叠加
• 确保单元格与表头列一一对应，保证数据展示的一致性

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