javascript - 避免在表格中显示重复的元素

Question

所以我在localStorage中保存了一些数据。

我将它们从本地存储返回到表中。

当我点击按钮输入新数据时，之前输入的数据在表格中重复。当我刷新页面时，一切正常。

$(document).ready(function() {
  function save() {

    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);
      // download table and insert cells and rows
      var table = document.getElementById("table");
      table.appendChild(tr);

    });
  }

  list = jQuery.parseJSON(localStorage.getItem("osoba") === null ? [] : localStorage.getItem("osoba"));
  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));
    document.getElementById("name").value = "";
    document.getElementById("surname").value = "";
    document.getElementById("date_bth").value = "";
    document.getElementById("numer_phone").value = "";
    save();
  });
});

如何在不重新加载页面的情况下避免表格重复？

Answer 1

保存的时候需要先清除表中已经存在的数据，否则调用save时会重新添加进去。以下是您的操作方法:

$(document).ready(function(){

    function save() {
        $("#table tr").remove(); // <- this

        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);

            // download table and insert cells and rows
            var table = document.getElementById("table");
            table.appendChild(tr);

        });
    }

    list = jQuery.parseJSON(localStorage.getItem("osoba") === null ? [] : localStorage.getItem("osoba"));
    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));
        document.getElementById("name").value="";
        document.getElementById("surname").value="";
        document.getElementById("date_bth").value="";
        document.getElementById("numer_phone").value="";
        save();
    });
});