当前位置：首页 > 前端开发 > 正文

如何轻松循环HTML表格行？

admin
前端开发
2025-06-15
2478

使用JavaScript动态生成表格行，通过循环数组数据创建tr和td元素并插入tbody中，实现HTML表格行的循环显示。

如何实现HTML表格行的循环

在网页开发中,表格行循环通常指动态生成重复的行结构（例如展示列表数据），以下是三种主流方法，根据需求选择：

纯JavaScript动态生成（推荐）

适用场景：前端数据渲染（如API返回的JSON数据）
步骤：

创建HTML表格基础结构：

<table id="userTable">
<thead>
 <tr>
   <th>ID</th>
   <th>姓名</th>
   <th>邮箱</th>
 </tr>
</thead>
<tbody id="tableBody"></tbody> <!-- 行将动态插入此处 -->
</table>

使用JavaScript循环生成行：

// 模拟数据（实际可从API获取）
const users = [
{ id: 1, name: "张三", email: "zhangsan@example.com" },
{ id: 2, name: "李四", email: "lisi@example.com" }
];

const tbody = document.getElementById(“tableBody”);

如何轻松循环HTML表格行？第1张

users.forEach(user => {
const row = document.createElement(“tr”);

row.innerHTML = `

${user.id} ${user.name} ${user.email}

tbody.appendChild(row);
});


**优点**：  
- 无需刷新页面  
- 适合实时数据更新  
- 符合现代前端开发实践
---
#### 方法二：服务器端语言生成
**适用场景**：后端直接渲染数据（如PHP/Python/Node.js）  
**PHP示例**：
```php
<?php
$users = [
  ["id" => 1, "name" => "张三", "email" => "zhangsan@example.com"],
  ["id" => 2, "name" => "李四", "email" => "lisi@example.com"]
];
?>
<table>
  <thead>...</thead>
  <tbody>
    <?php foreach ($users as $user): ?>
      <tr>
        <td><?php echo $user['id']; ?></td>
        <td><?php echo htmlspecialchars($user['name']); ?></td>
        <td><?php echo htmlspecialchars($user['email']); ?></td>
      </tr>
    <?php endforeach; ?>
  </tbody>
</table>

优点：

对SEO友好（内容直接存在于HTML中）
无需客户端JavaScript支持

模板引擎（如Vue/React）

适用场景：复杂前端应用
Vue.js示例：

<div id="app">
  <table>
    <thead>...</thead>
    <tbody>
      <tr v-for="user in users" :key="user.id">
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.email }}</td>
      </tr>
    </tbody>
  </table>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
  Vue.createApp({
    data() {
      return {
        users: [
          { id: 1, name: "张三", email: "zhangsan@example.com" },
          { id: 2, name: "李四", email: "lisi@example.com" }
        ]
      }
    }
  }).mount('#app');
</script>

优点：