本文详解如何利用 jQuery 的 $.each() 遍历数据数组，并通过 .append() 方法动态创建结构化 HTML 行与列，支持响应式布局（Bootstrap 栅格）和语义化表格两种实现方式。
本文详解如何利用 jquery 的 `$.each()` 遍历数据数组，并通过 `.append()` 方法动态创建结构化 html 行与列，支持响应式布局（bootstrap 栅格）和语义化表格两种实现方式。
在前端开发中，常需将 JSON 数据动态渲染为页面上的多行多列结构（如人员列表、成绩表等）。原代码试图复用固定 DOM 元素（如 .name）并反复调用 .text()，结果仅显示最后一条数据——这是因所有循环迭代均覆盖同一组元素，而非创建新行。正确做法是：为每条数据生成独立的 DOM 节点，并追加到容器中。
✅ 推荐方案一：基于 Bootstrap 栅格的响应式行渲染
适用于需要移动端适配、灵活布局的场景。关键点：
- 清空原始 .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(); // 执行渲染⚠️ 注意事项：
魔法映像企业网站管理系统下载技术上面应用了三层结构，AJAX框架，URL重写等基础的开发。并用了动软的代码生成器及数据访问类，加进了一些自己用到的小功能，算是整理了一些自己的操作类。系统设计上面说不出用什么模式，大体设计是后台分两级分类，设置好一级之后，再设置二级并选择栏目类型，如内容，列表，上传文件，新窗口等。这样就可以生成无限多个二级分类，也就是网站栏目。对于扩展性来说，如果有新的需求可以直接加一个栏目类型并新加功能操作
- 确保已引入 Bootstrap CSS（否则 col-* 类无效）；
- 避免在循环中频繁查询 DOM（如 $('.eventsBlock')），可提前缓存：const $container = $('.eventsBlock');；
- 若需后续交互（如点击某行），建议为每行添加唯一 data-id 或 id 属性。
✅ 推荐方案二：标准 HTML 表格（语义化 & 可访问性更优）
当数据本质为二维表格时，
| 方案 | 适用场景 | 关键技巧 | 性能提示 |
|---|---|---|---|
| Bootstrap 栅格 | 响应式卡片式布局、内容不严格对齐 | 使用 .append() + 模板字符串，避免重复 DOM 查询 | 批量生成后一次性插入（如用 documentFragment）更高效 |
| HTML 表格 | 数据报表、需排序/导出/无障碍支持 | 优先操作 | 大量数据时建议分页或虚拟滚动 |
无论选用哪种方式，核心原则不变：数据驱动 DOM 创建，而非覆盖已有节点。切勿在循环中反复 .text() 同一选择器——那是单值更新逻辑，而非列表渲染逻辑。
<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>
`);
});
}
