Избегайте отображения повторяющихся элементов в таблице - PullRequest
Новая
       5

Избегайте отображения повторяющихся элементов в таблице

0 голосов
/ 22 мая 2018

Итак, я сохранил некоторые данные в localStorage.

Я возвращаю их из localalstorage в таблицу.

Когда я нажимаю кнопку для ввода новых данных, ранее введенные данные дублируются.в таблице.Когда я обновляю страницу, все в порядке. 

$(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();
  });
});

Как избежать дублирования в таблице без перезагрузки страницы?

1 Ответ

0 голосов
/ 22 мая 2018

При сохранении необходимо сначала очистить данные, уже находящиеся в таблице, или они будут добавлены к нему при вызове сохранения.Вот как вы это делаете: 

$(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();
    });
});
...