如何创建一个按钮来删除一行？

Question

I have a table that dynamically adds a row after values are inputted.我有一个表格，可以在输入值后动态添加一行。 How can I add a delete button at the end of the table which will delete the row and the data that is appended in an array?如何在表格末尾添加一个删除按钮，该按钮将删除行和附加在数组中的数据？

I am guessing one way to go about it is using classList and appending it to the last, which in this case is where the "X" delete button is placed in the table.我猜测 go 的一种方法是使用 classList 并将其附加到最后一个，在这种情况下，“X”删除按钮放置在表中。

 let myLibrary = []; function Book(titles, authors, pages, reads){ this.titles = titles, this.authors = authors, this.pages = pages, this.reads = reads } function addBookToLibrary(){ let t = document.getElementById("titles").value; let a = document.getElementById("authors").value; let p = document.getElementById("pages").value; let r = document.getElementById("reads").value; let book = new Book(t, a, p, r); myLibrary.push(book); } function deleteButton(){ let tds = document.querySelectorAll("td"); for (let i = 0; i < tds.length; i++){ let text = tds[i].innerText; if (text === "x"){ tds[i].classList.add("delete-btn"); } } } let subDisplay = document.getElementById("subDisplay"); subDisplay.addEventListener("click", displayDetails); let row = 1; function displayDetails(){ let title = document.getElementById("titles").value; let author = document.getElementById("authors").value; let pages = document.getElementById("pages").value; let read = document.getElementById("reads").value; let display = document.getElementById("display"); let newRow = display.insertRow(row); let cell1 = newRow.insertCell(0); let cell2 = newRow.insertCell(1); let cell3 = newRow.insertCell(2); let cell4 = newRow.insertCell(3); let cell5 = newRow.insertCell(4); cell1.innerHTML = title; cell2.innerHTML = author; cell3.innerHTML = pages; cell4.innerHTML = read; cell5.innerHTML = "x"; row++; modalBg.classList.remove("bg-active"); } let modalBtn = document.querySelector('.modal-btn'); let modalBg = document.querySelector('.modal-bg'); let modalClose = document.querySelector(".modal-close"); let submitBtn = document.querySelector(".submit-button"); modalBtn.addEventListener("click", function(){ modalBg.classList.add("bg-active"); }); modalClose.addEventListener("click", function(){ modalBg.classList.remove("bg-active"); });

 *, *::after, *::before{ box-sizing: border-box; } nav { background-color: black; color: white; height: 35px; position: relative; } p { position: absolute; margin: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 35px; } table { width: 100%; } th { text-align: left; } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; }.modal-bg{ position: fixed; width: 100%; height: 100vh; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s; }.bg-active{ visibility: visible; opacity: 1; }.modal{ position: relative; padding: 10px; font-family: "montserrat", sans-serif; background-color: white; width: 30%; height: 30%; display: flex; justify-content: space-around; align-content: center; flex-direction: column; }.modal-button{ padding: 10px 30px; background-color: black; color: white; border: none; font-family: "Montserrat", sans-serif; cursor: pointer; }.modal-close{ position: absolute; top: 10px; right: 10px; cursor: pointer; }.submit-button{ margin-top: 10px; margin-bottom: 10px; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src = "script.js" defer></script> <link rel = "stylesheet" href="styles.css"> </head> <body> <nav> <p>Library</p> </nav> <div class = displaytable> <table id = "display"> <tr> <th>Title</th> <th>Author</th> <th>Pages</th> <th>Read</th> <th>Remove</th> </tr> </table> </div> <button class="modal-btn">Add Book</button> <button class = "delete-btn">Delete Book</button> <div class="modal-bg"> <div class ="modal"> <h2>Book</h2> <label for="name">Title</label> <input type="text" name="name" id = "titles"> <label for="name">Author</label> <input type="text" name="name" id = "authors"> <label for="name">Pages</label> <input type="text" name="name" id = "pages"> <label for="name">Read</label> <input type="text" name="name" id = "reads"> <span class="modal-close">x</span> <button class="submit-button" id = "subDisplay" onclick="addBookToLibrary()">Submit</button> </div> </div> </body> </html>

Answer 1

I would do this by keeping a track of the objects that are on the table using a structure such as an array.我将通过使用诸如数组之类的结构来跟踪桌子上的对象来做到这一点。 Create a separate array and update the same as you update the table.创建一个单独的数组并更新与更新表相同的内容。 While doing so, do the following: html = `<tr><td>${item}</td><td><input type="button" onclick="remove('${item}')" value="Remove"></td></tr>`;这样做时，请执行以下操作： html = `<tr><td>${item}</td><td><input type="button" onclick="remove('${item}')" value="Remove"></td></tr>`;

Next, add a function that will filter the array to remove the value you clicked from the same and then, recreate the table.接下来，添加一个 function 将过滤数组以删除您单击的值，然后重新创建表。

function remove(input) {
    arr = arr.filter((value, index, arr) => { return value != input;});
  updateTable();
}

I have made a fiddle to demonstrate the same:我做了一个小提琴来证明这一点：

https://jsfiddle.net/cruciformhawk7/ozcf3md4/ https://jsfiddle.net/cruciformhawk7/ozcf3md4/

Edit: After looking at your update, this code might help you.编辑：查看您的更新后，此代码可能会对您有所帮助。 https://jsfiddle.net/cruciformhawk7/gbuc0j8s/ https://jsfiddle.net/cruciformhawk7/gbuc0j8s/

Hope it helps.希望能帮助到你。

如何创建一个按钮来删除一行？

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-06-15 01:31:08

如何创建一个按钮来删除一行？

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-06-15 01:31:08

解决方案1
1 已采纳 2020-06-15 01:31:08