#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 В этом есть смысл, спасибо за совет. Я собираюсь попробовать и опубликовать его.