本文详解如何利用 jQuery 的 $.each() 遍历数据数组，并通过 .append() 方法动态创建结构化 HTML 行与列，支持响应式布局（Bootstrap 栅格）和语义化表格两种实现方式。

本文详解如何利用 jquery 的 `$.each()` 遍历数据数组，并通过 `.append()` 方法动态创建结构化 html 行与列，支持响应式布局（bootstrap 栅格）和语义化表格两种实现方式。

在前端开发中，常需将 JSON 数据动态渲染为页面上的多行多列结构（如人员列表、成绩表等）。原代码试图复用固定 DOM 元素（如 .name）并反复调用 .text()，结果仅显示最后一条数据——这是因所有循环迭代均覆盖同一组元素，而非创建新行。正确做法是：为每条数据生成独立的 DOM 节点，并追加到容器中。

✅ 推荐方案一：基于 Bootstrap 栅格的响应式行渲染

适用于需要移动端适配、灵活布局的场景。关键点：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

• 清空原始 .row 结构，将 .eventsBlock 改为纯容器；
• 每次循环生成一个完整 .row，内含多个 .col-* 列；
• 使用模板字符串拼接，提升可读性与维护性。

<div class="eventsBlock"></div>

const data = [
  { "name": "Alice", "surname": "Smith", "rollnum": "00002" },
  { "name": "Bob", "surname": "Walter", "rollnum": "00004" }
];

function load() {
  $.each(data, function(index, item) {
    $('.eventsBlock').append(`
      <div class="row">
        <div class="col-md-3 col-sm-6">
          <strong>Name:</strong> ${item.name}
        </div>
        <div class="col-md-3 col-sm-6">
          <strong>Surname:</strong> ${item.surname}
        </div>
        <div class="col-md-3 col-sm-6">
          <strong>Roll No.:</strong> ${item.rollnum}
        </div>
        <div class="col-md-3 col-sm-6">
          <strong>Location:</strong> N/A
        </div>
      </div>
      <hr class="my-3"> <!-- 视觉分隔线 -->
    `);
  });
}

load(); // 执行渲染

⚠️ 注意事项：

• 确保已引入 Bootstrap CSS（否则 col-* 类无效）；
• 避免在循环中频繁查询 DOM（如 $('.eventsBlock')），可提前缓存：const $container = $('.eventsBlock');；
• 若需后续交互（如点击某行），建议为每行添加唯一 data-id 或 id 属性。

✅ 推荐方案二：标准 HTML 表格（语义化 & 可访问性更优）

当数据本质为二维表格时，

是最佳选择：结构清晰、SEO 友好、屏幕阅读器兼容性强。

<table class="table table-striped eventsBlock">
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Roll Number</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

function load() {
  const $tbody = $('.eventsBlock tbody');
  $.each(data, function(index, item) {
    $tbody.append(`
      <tr>
        <td>${item.name}</td>
        <td>${item.surname}</td>
        <td>${item.rollnum}</td>
        <td>N/A</td>
      </tr>
    `);
  });
}

✅ 优势说明：

/ 明确分离表头与内容，支持滚动固定表头；

可轻松集成 DataTables 等插件实现搜索、排序、分页；

无需依赖 CSS 框架，原生语义化更强。

? 总结

，保持 不变

方案	适用场景	关键技巧	性能提示
Bootstrap 栅格	响应式卡片式布局、内容不严格对齐	使用 .append() + 模板字符串，避免重复 DOM 查询	批量生成后一次性插入（如用 documentFragment）更高效
HTML 表格	数据报表、需排序/导出/无障碍支持	优先操作
大量数据时建议分页或虚拟滚动

无论选用哪种方式，核心原则不变：数据驱动 DOM 创建，而非覆盖已有节点。切勿在循环中反复 .text() 同一选择器——那是单值更新逻辑，而非列表渲染逻辑。