如何实现表格刷新不追加内容？点击按钮重复添加问题求助

问题核心是你使用了innerHTML +=来添加新行，这会在现有内容后追加，而非替换旧数据行。以下是两种可行的修复方案：

方案一：清空现有数据行后再添加新内容 #

在循环添加新行之前，删除表格中除表头外的所有行：

function test() {
  var hst = document.getElementById("highscores");
  
  // 移除表头之外的所有行
  while (hst.rows.length > 1) {
    hst.deleteRow(1);
  }

  var highScores = [{
      name: "Maximillian",
      score: 1000
    },
    {
      name: "The second guy",
      score: 700
    },
    {
      name: "The newbie",
      score: 50
    },
  ];

  localStorage.setItem("highscores", JSON.stringify(highScores));
  var retrievedScores = JSON.parse(localStorage.getItem("highscores"));

  for (var i = 0; i < retrievedScores.length; i++) {
    hst.innerHTML += "<tr><td>" + retrievedScores[i].name + "</td><td>" + retrievedScores[i].score + "</td></tr>";
  }
}

方案二：重新构建整个表格的HTML内容 #

直接生成包含表头和新数据的完整HTML，替换表格的全部内容：

function test() {
  var hst = document.getElementById("highscores");

  var highScores = [{
      name: "Maximillian",
      score: 1000
    },
    {
      name: "The second guy",
      score: 700
    },
    {
      name: "The newbie",
      score: 50
    },
  ];

  localStorage.setItem("highscores", JSON.stringify(highScores));
  var retrievedScores = JSON.parse(localStorage.getItem("highscores"));

  // 初始化表头HTML
  let tableContent = "<tr><td>Name</td><td>Score</td></tr>";
  // 拼接数据行
  retrievedScores.forEach(score => {
    tableContent += `<tr><td>${score.name}</td><td>${score.score}</td></tr>`;
  });
  // 替换表格全部内容
  hst.innerHTML = tableContent;
}

说明 #

• 方案一适合表头结构复杂、不想重复编写表头代码的场景，通过DOM操作精准删除旧数据行。
• 方案二代码更简洁，使用模板字符串让拼接HTML更易读，直接替换整个表格内容确保没有旧数据残留。

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