Пытаюсь понять, как удалить строки в таблице с помощью удаления всех строк в локальном хранилище

#javascript #arrays #json #html-table #local-storage

Вопрос:

Итак, я пытался выяснить, как удалить строку в таблице, не удаляя все строки, расположенные в локальном хранилище.

Вот мой код JS, таблица, которая собирает данные из формы.

 var arr = new Array(); //Add data to memory function addData() {  getData();  arr.push({  contentId: document.getElementById("contentId").value,  channel: document.getElementById("channel").value,  follows: document.getElementById("follows").value,  unfollows: document.getElementById("unfollows").value,  likes: document.getElementById("likes").value,  shares: document.getElementById("shares").value,  views: document.getElementById("views").value,  reaches: document.getElementById("reaches").value,  postDate: document.getElementById("postDate").value  });   localStorage.setItem("localData", JSON.stringify(arr));  showData();  }  function getData() {  var str = localStorage.getItem("localData");  if (str != null)  arr = JSON.parse(str); }  function deleteData() {  localStorage.clear() }  function showData() {  getData();   var tbl = document.getElementById("myTable");  var x = tbl.rows.length;  while (--x) {  tbl.deleteRow(x);  }   for (i = 0; i lt; arr.length; i  ) {  var r = tbl.insertRow();  var cell1 = r.insertCell();  var cell2 = r.insertCell();  var cell3 = r.insertCell();  var cell4 = r.insertCell();  var cell5 = r.insertCell();  var cell6 = r.insertCell();  var cell7 = r.insertCell();  var cell8 = r.insertCell();  var cell9 = r.insertCell();   cell1.innerHTML = arr[i].contentId;  cell2.innerHTML = arr[i].channel;  cell3.innerHTML = arr[i].follows;  cell4.innerHTML = arr[i].unfollows;  cell5.innerHTML = arr[i].likes;  cell6.innerHTML = arr[i].shares;  cell7.innerHTML = arr[i].views;  cell8.innerHTML = arr[i].reaches;  cell9.innerHTML = arr[i].postDate;  }  }  

Поэтому, может ли кто-нибудь дать мне небольшое представление о лучшем решении для удаления строк в таблице с помощью Js.

Предположим, вам может понадобиться мой HTML-код.

 lt;div class="formData"gt;  lt;form onsubmit="addData(); return false;"gt;  lt;label for="contentId"gt;Enter ContentID:lt;/labelgt;  lt;input type="text" id="contentId" placeholder="ContentID" /gt;lt;/brgt;  lt;label for="follows"gt;Enter in the social site:lt;/labelgt;  lt;input type="text" id="channel" placeholder="channel" /gt;lt;/brgt;  lt;label for="channel"gt;Enter # of new followers:lt;/labelgt;  lt;input type="number" id="follows" placeholder="followers" /gt;lt;/brgt;  lt;label for="unfollows"gt;Enter the # of unfollowers:lt;/labelgt;  lt;input type="number" id="unfollows" placeholder="Unfollowers" /gt;lt;/brgt;  lt;label for="likes"gt;Enter the # of likes:lt;/labelgt;  lt;input type="number" id="likes" placeholder="Likes" /gt;lt;/brgt;  lt;label for="shares"gt;Enter the # of shares:lt;/labelgt;  lt;input type="text" id="shares" placeholder="Shares" /gt;lt;/brgt;  lt;label for="views"gt;Enter the # of views:lt;/labelgt;  lt;input type="text" id="views" placeholder="Views" /gt;lt;/brgt;  lt;label for="reaches"gt;Enter the # of reaches:lt;/labelgt;  lt;input type="text" id="reaches" placeholder="reaches" /gt;lt;/brgt;  lt;label for="reaches"gt;Date Posted:lt;/labelgt;  lt;input type="date" id="postDate" placeholder="date" /gt;lt;/brgt;  lt;brgt;  lt;input type="submit" value="Add data" /gt;  lt;input type="reset" value="clear" /gt;  lt;input type="button" value="delete" onclick="deleteData();" /gt;  lt;/formgt;  lt;/divgt;  lt;h3gt;Monthly Social Media Datalt;/h3gt;  lt;table id="myTable" border=1gt;  lt;trgt;  lt;thgt;  Content ID  lt;/thgt;  lt;thgt;  Channel  lt;/thgt;  lt;thgt;  Followers  lt;/thgt;  lt;thgt;  Unfollowers  lt;/thgt;  lt;thgt;  Likes  lt;/thgt;  lt;thgt;  views  lt;/thgt;  lt;thgt;  Shares  lt;/thgt;  lt;thgt;  Reaches  lt;/thgt;  lt;thgt;  Date Posted  lt;/thgt;  lt;/trgt;  lt;/tablegt;  lt;scriptgt;  showData();  lt;/scriptgt;  

Комментарии:

1. Пожалуйста, поделитесь своим html-кодом, трудно понять, что вам нужно. Как вы «удаляете» строку своей таблицы ? Элементы DOM не «связаны» с элементами вашего массива

2. с чистым javascript html и ничего подобного react.js, вам, вероятно, потребуется повторно отобразить таблицу, сохранив переменную в таблице и сохранив переменную массива, содержащую все строки в таблице. измените «var r = tbl.insertRow ()», чтобы добавить в массив, а затем удалить из массива и повторно отобразить

3. @bZezzz, HTML — код теперь доступен.

4. Хорошо, так что ты хочешь сделать ? Удалить строку по щелчку мыши ? Хорошо, но нажмите где ? Если вы хотите удалить строку в DOM, вам нужна кнопка или (флажок), чтобы указать, какую строку вы хотите удалить.

5. @bZezzz В этом есть смысл, спасибо за совет. Я собираюсь попробовать и опубликовать его.