jQuery动态更新表格时新增行显示在表格外的问题求助

嘿，我来帮你搞定这个表格刷新的问题！你遇到的核心问题其实是HTML结构不符合规范，浏览器自动纠正了错误的嵌套，才导致内容跑到了thead上面。

问题根源 #

HTML规范明确规定：<tbody>的直接子元素只能是<tr>标签，你在<tbody>里直接放了一个<div id="tablerow">，这属于无效嵌套。浏览器为了修复这个错误，会自动把这个<div>从<tbody>里移出来，最终它会出现在整个<table>的前面——这就是为什么你更新<div>里的<tr>时，内容会显示在thead上方，检查元素时还能看到它在::before区域的原因。

解决方案 #

这里给你两种靠谱的修复方式：

方案一：直接用tbody作为更新容器

先修改你的HTML结构，去掉tbody里的div，给tbody加个id：

<div class="container"><h1>Refresh Test:</h1></div> 
<div id="table_1" class="container"> 
  <table class="table" style="width: 100%"> 
    <thead>
      <tr><th>1</th><th>2</th><th>time</th></tr>
    </thead> 
    <tbody id="tableBody">
      <!-- 这里直接留空，后续用jQuery填充tr -->
    </tbody> 
  </table> 
</div>

然后修改jQuery函数，直接把生成的tr插入到tbody里：

function refreshTable() {
  $.get("/foo", "", function(data) {
    const parsedData = JSON.parse(data);
    // 用模板字符串让代码更简洁
    $("#tableBody").html(`<tr><td>${parsedData.D1}</td><td>${parsedData.D2}</td><td>${parsedData.D3}</td></tr>`);
  });
};
window.setInterval(refreshTable, 3000);

方案二：预先保留空tr作为更新目标

如果你习惯用单个元素作为更新入口，可以直接在tbody里放一个空的tr并给它id：

<div class="container"><h1>Refresh Test:</h1></div> 
<div id="table_1" class="container"> 
  <table class="table" style="width: 100%"> 
    <thead>
      <tr><th>1</th><th>2</th><th>time</th></tr>
    </thead> 
    <tbody>
      <tr id="tableRow"></tr>
    </tbody> 
  </table> 
</div>

然后修改jQuery函数，直接更新这个tr内部的td内容：

function refreshTable() {
  $.get("/foo", "", function(data) {
    const parsedData = JSON.parse(data);
    $("#tableRow").html(`<td>${parsedData.D1}</td><td>${parsedData.D2}</td><td>${parsedData.D3}</td>`);
  });
};
window.setInterval(refreshTable, 3000);

为什么之前的方法有效？ #

你提到预先创建空表格行、逐个更新td内容能正常显示，就是因为那个结构是符合规范的：<tr>在<tbody>里，<td>在<tr>里，浏览器不需要调整DOM结构，所以内容能正确显示在表格的tbody区域。

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