在订单管理后台中，前端常常需要把接口返回的订单数组展示成表格。如果订单数量不固定，用手写静态表格行显然不现实。通过循环遍历数据并动态创建表格行，可以让渲染逻辑清晰且易于扩展。
为什么使用循环生成表格行
订单数据通常来自后端接口，条数随时变化。循环方式可以把“数据”和“视图”解耦：只要拿到数组，就能自动产出对应行。相比人工维护HTML，循环方案不易漏写字段，也方便后续加列。
基础实现思路
核心步骤是先获取容器 tbody，然后遍历订单数组，为每条记录拼出 tr 和 td，最后统一插入。下面以原生 JavaScript 为例。
// 假设从接口拿到如下订单数据
const orders = [
{ id: 1001, name: '张三', amount: 200, status: '已付款' },
{ id: 1002, name: '李四', amount: 150, status: '待发货' }
];
// 获取表格主体容器
const tbody = document.querySelector('#order-tbody');
// 使用 map 配合循环生成行字符串
const rowsHtml = orders.map(function(order) {
return '<tr>' +
'<td>' + order.id + '</td>' +
'<td>' + order.name + '</td>' +
'<td>' + order.amount + '</td>' +
'<td>' + order.status + '</td>' +
'</tr>';
}).join('');
// 插入到 tbody 中
tbody.innerHTML = rowsHtml;
处理空数据情况
当接口返回空数组时，页面应给出提示而不是空白。可以在循环前做判断：
if (orders.length === 0) {
tbody.innerHTML = '<tr><td colspan="4">暂无订单数据</td></tr>';
} else {
tbody.innerHTML = orders.map(function(order) {
return '<tr>' +
'<td>' + order.id + '</td>' +
'<td>' + order.name + '</td>' +
'<td>' + order.amount + '</td>' +
'<td>' + order.status + '</td>' +
'</tr>';
}).join('');
}
使用模板字符串简化代码
ES6 的模板字符串能让循环体内的拼接更直观，减少引号混乱。注意在 innerHTML 赋值时，标签中的尖括号仍属于字符串内容，不需要在 JS 层转义，但写进文章示例时我们按规范转义展示。
const rows = orders.map(order => `
<tr>
<td>${order.id}</td>
<td>${order.name}</td>
<td>${order.amount}</td>
<td>${order.status}</td>
</tr>
`).join('');
tbody.innerHTML = rows;
小结
用循环生成动态订单表格行，关键点是把数据映射为 HTML 字符串再一次性插入。这样避免了反复操作 DOM，也令代码结构清楚。实际项目中可结合框架的列表渲染指令，但底层思想一致。