JavaScript使用forEach渲染表格时表头重复生成如何解决？

问题原因 #

你当前的代码将完整的<table>、表头<thead>结构都放在了forEach循环内部，每遍历一条从接口返回的产品数据，都会生成一整张包含表头的新表格，最终渲染出来的自然是多个重复表头拼接的效果。

修正方案 #

把固定的表格结构、表头移到循环外，仅在循环内拼接表格行<tr>的内容即可，修改后的代码如下：

import {http} from "./http.js";

document.addEventListener("DOMContentLoaded", getProducts);

function getProducts() {
    http
        .get('http://localhost:3000/products')
        .then((data) =>{
            // 固定的表格结构、表头放在循环外，只初始化一次
            let output = `
                <table class="table">
                <thead class="thead-dark">
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">Clasa</th>
                    <th scope="col">Numar Elevi</th>
                    <th scope="col">Profesor</th>
                    <th scope="col">Media Notelor</th>
                  </tr>
                </thead>
                <tbody>
            `;
            
            // 循环仅拼接每行数据
            data.forEach((product) => {
                output += `
                   <tr>
                    <th scope="row">${product.id}</th>
                     <td>${product.numar}</td>
                    <td>${product.profesor}</td>
                     <td>${product.elevi}</td>
                     <td>${product.media}</td>
                   </tr>
                `;
            })
            
            // 拼接表格闭合标签
            output += `
                </tbody>                
                </table>
            `;
            document.getElementById('table').innerHTML = output;
        });
}

优化建议（可选） #

你也可以直接把静态的表格结构写在页面HTML文件中，JS只需要获取<tbody>节点，往里面插入行内容即可，后续新增数据的时候不需要全量替换整个表格的HTML，性能和维护性都会更好：

1. HTML部分提前写好表格结构：

<div id="table">
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">Clasa</th>
        <th scope="col">Numar Elevi</th>
        <th scope="col">Profesor</th>
        <th scope="col">Media Notelor</th>
      </tr>
    </thead>
    <tbody id="table-body">
      <!-- JS动态插入行 -->
    </tbody>                
  </table>
</div>

2. 对应JS修改为：

import {http} from "./http.js";

document.addEventListener("DOMContentLoaded", getProducts);

function getProducts() {
    http
        .get('http://localhost:3000/products')
        .then((data) =>{
            const tbody = document.getElementById('table-body');
            // 先清空原有行，避免重复渲染
            tbody.innerHTML = '';
            data.forEach((product) => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <th scope="row">${product.id}</th>
                    <td>${product.numar}</td>
                    <td>${product.profesor}</td>
                    <td>${product.elevi}</td>
                    <td>${product.media}</td>
                `;
                tbody.appendChild(tr);
            })
        });
}

内容的提问来源于stack exchange，提问作者Snaksss