Flask+Ajax伪搜索引擎：HTML表格动态更新重复追加问题

问题出在每次获取新搜索结果时，没有清空表格里的旧内容，直接把新行追加到了末尾，导致结果不断累加。只需要在渲染新结果前清空表格即可解决。

修改后的代码如下：

document.addEventListener("DOMContentLoaded", () => {
  const search = document.querySelector("#search");
  if (search !== null)
  {
      search.onkeyup = () => {
          console.log(search.value);
          get_results(search.value);
      };
  }
});
function get_results(query)
{
    let table = document.getElementById('resulting');
    // 先清空表格内容
    table.innerHTML = '';
    
    if (query === null || query === "")
    {
        return;
    }
    
    fetch(`/search/${query}`)
    .then(response => response.json())
    .then(result => {
        console.log(result);
        result.forEach(item => {
            console.log(item);
            const tr = document.createElement('tr');
            const td1 = document.createElement('td');
            let name = document.createTextNode(item.user_id)
            td1.appendChild(name);
            tr.appendChild(td1);
            table.appendChild(tr);
        });
    });
}

关键改动说明：

• 在函数开头先获取表格元素并清空其内容，确保每次渲染都是全新的结果
• 合并了空值和空字符串的判断逻辑，代码更简洁
• 将循环变量名从query改为item，避免和参数名冲突，提高可读性

额外提示：如果你的表格包含<thead>表头，直接用innerHTML = ''会连表头一起清空，这种情况下可以单独获取<tbody>元素操作：

let tbody = document.querySelector('#resulting tbody');
tbody.innerHTML = '';

之后把新生成的行添加到这个tbody里即可保留表头。

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