如何使用 jQuery 动态生成多行多列数据表格

本文详解如何利用 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(); // 执行渲染

⚠️ 注意事项：

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

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

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

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

✅ 优势说明：

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

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

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

? 总结

，保持

不变

方案	适用场景	关键技巧	性能提示
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>     `);   }); }