如何在不刷新页面的情况下避免表格出现重复元素？

嘿，我一眼就看出问题所在了——你的save()函数每次执行时，都是把list里的所有数据追加到表格中，而不是先清除已有的旧内容。页面加载时第一次调用save()没问题，但点击新增按钮后，list已经包含了旧数据+刚新增的数据，再次调用save()就会把所有数据又重新加一遍，自然就出现重复了。

给你两种靠谱的解决方案，你可以根据需求选择：

方案一：清空表格后重新渲染（推荐，更通用） #

修改你的save()函数，在渲染新数据前先把表格里已有的内容（除了表头，如果有的话）清空，然后再重新绘制所有数据。这样不管是新增、修改还是删除数据，只要调用save()就能保证表格内容和list完全同步。

修改后的save()函数代码如下：

function save() {
  var table = document.getElementById("table");
  // 先清空表格内容：优先找tbody（如果你的表格有thead+tbody结构）
  var tbody = table.querySelector('tbody');
  if (tbody) {
    tbody.innerHTML = '';
  } else {
    // 如果没有tbody，就删除所有非表头的行（假设第一行是表头）
    const existingRows = table.querySelectorAll('tr:not(:first-child)');
    existingRows.forEach(row => row.remove());
  }

  // 再重新渲染所有数据
  list.forEach(function(item) {
    var nameNode = document.createTextNode(item.name);
    var surnameNode = document.createTextNode(item.surname);
    var dataNode = document.createTextNode(item.data);
    var nrNode = document.createTextNode(item.nr);
    var tdName = document.createElement("td");
    var tdSurname = document.createElement("td");
    var tdData = document.createElement("td");
    var tdNr = document.createElement("td");
    tdName.appendChild(nameNode);
    tdSurname.appendChild(surnameNode);
    tdData.appendChild(dataNode);
    tdNr.appendChild(nrNode);
    var tr = document.createElement("tr");
    tr.appendChild(tdName);
    tr.appendChild(tdSurname);
    tr.appendChild(tdData);
    tr.appendChild(tdNr);
    
    // 把新行加到tbody或者表格里
    if (tbody) {
      tbody.appendChild(tr);
    } else {
      table.appendChild(tr);
    }
  });
}

另外，你初始获取localStorage数据的代码可以优化一下，避免重复调用localStorage.getItem：

// 替换原来的list赋值代码
var storedOsoba = localStorage.getItem("osoba");
list = storedOsoba ? jQuery.parseJSON(storedOsoba) : [];

方案二：只插入新增的那一行（适合简单场景） #

如果你不想每次都清空重绘，也可以在点击新增按钮时，只把刚创建的那条数据对应的行插入到表格末尾，而不是调用整个save()。这样代码会有一点重复，但性能稍好（只操作一行）。

修改后的点击事件代码：

$("#send").click(function() {
  var osoba = {};
  osoba["name"] = document.getElementById("name").value;
  osoba["surname"] = document.getElementById("subname").value;
  osoba["data"] = document.getElementById("date_bth").value;
  osoba["nr"] = document.getElementById("numer_phone").value;
  list.push(osoba);
  localStorage.setItem("osoba", JSON.stringify(list));
  
  // 单独创建新行并添加到表格
  var nameNode = document.createTextNode(osoba.name);
  var surnameNode = document.createTextNode(osoba.surname);
  var dataNode = document.createTextNode(osoba.data);
  var nrNode = document.createTextNode(osoba.nr);
  var tdName = document.createElement("td");
  var tdSurname = document.createElement("td");
  var tdData = document.createElement("td");
  var tdNr = document.createElement("td");
  tdName.appendChild(nameNode);
  tdSurname.appendChild(surnameNode);
  tdData.appendChild(dataNode);
  tdNr.appendChild(nrNode);
  var tr = document.createElement("tr");
  tr.appendChild(tdName);
  tr.appendChild(tdSurname);
  tr.appendChild(tdData);
  tr.appendChild(tdNr);
  var table = document.getElementById("table");
  table.appendChild(tr);
  
  // 清空输入框
  document.getElementById("name").value = "";
  document.getElementById("subname").value = "";
  document.getElementById("date_bth").value = "";
  document.getElementById("numer_phone").value = "";
  // 这里不再调用save()
});

两种方案对比 #

• 方案一更推荐，因为它的逻辑更统一，后续如果要加删除、编辑功能，只需要更新list然后调用save()就能自动刷新表格，不用再写额外的DOM操作代码。
• 方案二适合只需要新增功能的简单场景，但代码有重复，后续维护成本稍高。

内容的提问来源于stack exchange，提问作者JJ.G