使用JavaScript导入JSON数据到HTML表格时出现多余行问题

问题描述 #

我想构建一个HTML表格，首列单元格为图片（设置了rowspan="8"），后续单元格填充<thead>定义的表头对应数值，但遇到问题：JavaScript循环迭代过程中，每次都会新增一行，尽管我并未额外使用<tr>标签。

相关代码 #

JavaScript代码 #

fetch("./static/js/data.json")
  .then(response => response.json())
  .then(data => {
    for (var j = 0; j < 10; j++) {
      let imgsrc = data.data[j].image;
      document.querySelector("#userdata").innerHTML += 
        `<tr><td rowspan="8"><img src=${imgsrc} width="150" height="150"></td>`;
      for (var i = 0; i < 5; i++) {
        let vmovieID = data.data[j].ingredients[i].contents;
        document.querySelector("#userdata").innerHTML += `<td>${vmovieID}</td>`;
      }
    }
    document.querySelector("#userdata").innerHTML += '</tr>'
  });

HTML代码 #

<div class="panel-body">
  <table id="userdata">
    <thead>
      <th>Image</th>
      <th>Dry Matter</th>
      <th>CP</th>
      <th>GE</th>
      <th>Calcium</th>
    </thead>
  </table>
</div>

运行现象 #

表格中的图片和对应数据被拆分成了多行，每一组数据单独占据一行，完全没有实现rowspan合并行的预期效果。

问题原因 #

浏览器在每次修改innerHTML时，会自动补全不完整的HTML结构。比如第一次循环中，你只插入了<tr><td rowspan="8"><img...></td>，这属于不完整的行结构，浏览器会自动为其添加闭合的</tr>，导致每一次循环都生成了一个独立的行。而最后在循环外添加的</tr>，只会变成无效的冗余标签，进一步打乱表格结构。

解决方案 #

不要逐次拼接innerHTML，而是先把所有要生成的表格行HTML内容拼接成一个完整的字符串，最后一次性插入到表格中，避免浏览器中途补全不完整标签。同时要确保每一行的HTML结构完整，把</tr>放在循环内部，对应每一个<tr>。

修改后的JavaScript代码 #

fetch("./static/js/data.json")
  .then(response => response.json())
  .then(data => {
    // 先声明空字符串存储所有行的HTML
    let tableRows = '';
    for (var j = 0; j < 10; j++) {
      let imgsrc = data.data[j].image;
      // 拼接当前行的开头
      tableRows += `<tr><td rowspan="8"><img src="${imgsrc}" width="150" height="150"></td>`;
      for (var i = 0; i < 5; i++) {
        let vmovieID = data.data[j].ingredients[i].contents;
        // 拼接当前行的单元格
        tableRows += `<td>${vmovieID}</td>`;
      }
      // 闭合当前行
      tableRows += '</tr>';
    }
    // 一次性插入所有行
    document.querySelector("#userdata").innerHTML += tableRows;
  });

额外的HTML规范修正 #

<thead>中的表头单元格应该包裹在<tr>标签内，这是HTML的规范要求，修正后的HTML代码：

<div class="panel-body">
  <table id="userdata">
    <thead>
      <tr>
        <th>Image</th>
        <th>Dry Matter</th>
        <th>CP</th>
        <th>GE</th>
        <th>Calcium</th>
      </tr>
    </thead>
  </table>
</div>

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