如何用JavaScript数组填充HTML表格模板？显示异常求助

你的问题根源是HTML表格结构不符合规范——<tbody>标签内只能包含<tr>、<th>这类表格相关元素，不能直接放<div>。浏览器解析时会自动把非法的<div id="list">移到表格外面，所以生成的行就跑到表头上方去了，格式自然混乱。

修复步骤： #

• 调整HTML结构：删掉<tbody>里的<div id="list"></div>，直接用<tbody>作为数据行容器；把<template>移到<table>外面，避免干扰表格正常结构。
• 修改JS代码：将生成的HTML直接插入到<tbody>中，而非原来的div。

修改后的完整代码：

HTML：

<table id="dataTable" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>Name</th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody id="tableBody"></tbody>
</table>

<template id="template">
  <tr>
    <td>{name}</td>
    <td>{title}</td>
  </tr>
</template>

JavaScript：

const contactArray = [{"Name":"Blake Janacek","Title":"Marketing Manager"},{"Name":"Dominic Flanders","Title":"Project Manager"}];

const html = contactArray.map(obj => {
  let item = document.querySelector('#template').innerHTML;
  item = item.replace('{name}', obj.Name);
  item = item.replace('{title}', obj.Title);
  return item;
});

document.querySelector('#tableBody').innerHTML = html.join('');

这样修改后，表格结构完全符合规范，生成的<tr>会正确嵌入到<tbody>内，和表头一一对应，布局就能正常显示了。

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