通过集合foreach 动态渲染出 html 表格 列名也要显示

可以使用JavaScript的forEach方法来动态渲染HTML表格，同时显示列名。以下是一个示例代码：

<!DOCTYPE html>
<html>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
      </tr>
    </thead>
    <tbody>
      <!-- 数据将通过JavaScript动态插入 -->
    </tbody>
  </table>

  <script>
    var data = [
      { name: 'John', age: 25, gender: 'Male' },
      { name: 'Sarah', age: 30, gender: 'Female' },
      { name: 'Michael', age: 35, gender: 'Male' }
    ];

    var table = document.getElementById('myTable');
    var tbody = table.getElementsByTagName('tbody')[0];

    data.forEach(function (item) {
      var row = document.createElement('tr');
      Object.keys(item).forEach(function (key) {
        var cell = document.createElement('td');
        cell.textContent = item[key];
        row.appendChild(cell);
      });
      tbody.appendChild(row);
    });
  </script>
</body>
</html>

在上面的示例中，我们首先创建了一个包含数据的JavaScript数组。然后，使用getElementById方法获取表格和tbody元素。接下来，使用forEach方法对数据数组进行迭代，创建行和单元格，并将数据插入到单元格中。最后，将行添加到tbody元素中，完成动态渲染HTML表格的过程。

通过集合foreach 动态渲染出 html 表格 列名也要显示

通过集合foreach 动态渲染出 html 表格列名也要显示