For 循环表内容中的删除按钮

Question

希望大家在这个悲惨的时代过得好好的！

我在完成上级指定的任务时遇到问题。 也就是说，我创建了一个表格并完成了按评级排序并设法制作了一个有效的添加内容按钮。 但是我尝试在表格中的每个对象旁边添加删除按钮时碰壁了。 帮助将是非常受欢迎的。

这是js。 代码

 'use strict' let movieData = [{ "id": 1, "name": "Network", "genre": "Comedy|Drama", "rating": "68.22" }, { "id": 2, "name": "Kommissarie Späck", "genre": "Comedy", "rating": "30.65" }, { "id": 3, "name": "Pirate, The", "genre": "Adventure|Comedy|Musical|Romance", "rating": "98.22" }, { "id": 4, "name": "Mary and Martha", "genre": "Drama", "rating": "11.15" }, { "id": 5, "name": "Four Days in September (O Que É Isso, Companheiro?)", "genre": "Drama", "rating": "20.35" }, { "id": 6, "name": "Sibling Rivalry", "genre": "Comedy", "rating": "5.91" }, { "id": 7, "name": "Alice in Wonderland", "genre": "Adventure|Children|Fantasy", "rating": "52.69" }, { "id": 8, "name": "Dead Weekend", "genre": "Comedy|Sci-Fi", "rating": "30.84" }, { "id": 9, "name": "Top Hat", "genre": "Comedy|Musical|Romance", "rating": "60.06" }, { "id": 10, "name": "Cleopatra", "genre": "Drama|Romance|War", "rating": "65.39" }, { "id": 11, "name": "For All Mankind", "genre": "Documentary", "rating": "73.24" }, { "id": 12, "name": "Messiah of Evil", "genre": "Horror", "rating": "28.9" }, { "id": 13, "name": "Princess and the Pirate, The", "genre": "Adventure|Comedy|Romance", "rating": "20.41" }, { "id": 14, "name": "Restrepo", "genre": "Documentary|War", "rating": "71.18" }, { "id": 15, "name": "Return to the Blue Lagoon", "genre": "Adventure|Romance", "rating": "67.92" }, { "id": 16, "name": "Convoy", "genre": "Action|Comedy|Drama", "rating": "22.53" }, { "id": 17, "name": "Perfect", "genre": "Drama|Romance", "rating": "86.25" }, { "id": 18, "name": "Son of Babylon (Syn Babilonu)", "genre": "Drama", "rating": "26.54" }, { "id": 19, "name": "Heaven and Earth (Ten to Chi to)", "genre": "Action|Adventure|Drama|War", "rating": "69.39" }, { "id": 20, "name": "Carcasses", "genre": "Documentary", "rating": "3.72" }, { "id": 21, "name": "Repentance", "genre": "Drama|Horror|Thriller", "rating": "55.21" }, { "id": 22, "name": "Loose Change: Second Edition", "genre": "Documentary|Mystery", "rating": "72.22" }, { "id": 23, "name": "Resurrection Man", "genre": "Drama|Thriller", "rating": "74.68" }, { "id": 24, "name": "Green Card", "genre": "Comedy|Drama|Romance", "rating": "35.28" }, { "id": 25, "name": "Micki + Maude", "genre": "Comedy", "rating": "2.02" }, { "id": 26, "name": "Rover, The", "genre": "Crime|Drama", "rating": "18.73" }, { "id": 27, "name": "Dark Horse (Voksne mennesker)", "genre": "Comedy|Drama|Romance", "rating": "28.19" }, { "id": 28, "name": "Street Thief", "genre": "Crime|Documentary", "rating": "67.11" }, { "id": 29, "name": "Woman In Berlin, A (Anonyma - Eine Frau in Berlin)", "genre": "Drama|War", "rating": "13.85" }, { "id": 30, "name": "Expendables, The", "genre": "Action|Adventure|Thriller", "rating": "92.78" }, ]; //Toggle Sort function sortTable(n) { let table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; table = document.getElementById("tableData"); switching = true; dir = 'asc'; while (switching) { switching = false; rows = table.rows; for (i = 0; i < (movieData.length - 1); i++) { shouldSwitch = false; x = rows[i].getElementsByTagName('td')[n]; y = rows[i + 1].getElementsByTagName('td')[n]; if (dir == 'asc') { if (parseFloat(x.innerHTML) > parseFloat(y.innerHTML)) { shouldSwitch = true; break; } } else if (dir == 'desc') { if (parseFloat(x.innerHTML) < parseFloat(y.innerHTML)) { shouldSwitch = true; break; } } } if (shouldSwitch) { rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; switchcount++; } else { if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } } } }; //Add content to the table function addTableRow() { let table = document.getElementById('tableData'); let txt = ''; let movieNameInput = document.getElementById('movieName').value; let movieGenreInput = document.getElementById('movieGenre').value; let movieRatingInput = document.getElementById('movieRating').value; let row = table.insertRow(); txt = txt + `<tr><td>${movieNameInput}</td><td>${movieGenreInput}</td><td>${movieRatingInput}</td></tr>`; row.innerHTML = txt; } window.onload = () => { loadTableData(movieData); } function loadTableData(movieData) { let tableBody = document.getElementById('tableData'); let txt = ''; for (let i = 0; i < movieData.length; i++) { txt = txt + `<tr><td>${movieData[i].name}</td><td>${movieData[i].genre}</td><td>${movieData[i].rating}<td></tr>`; } tableBody.innerHTML = txt }

 body { background-color: #f2f2f2f2; color: black; font-weight: 500; background-color: rgb(250, 241, 231); } table { border-collapse: collapse; width: 50%; text-align: center; margin: 40px auto; } tr, th { border: 1px solid #cccccc; padding: 8px; font-size: 16px Z; } th { font-weight: bold; text-transform: uppercase; color: bisque; background-color: #444 } tr:nth-child(even) { background: rgba(15, 85, 6, 0.438); } tr:hover { color: whitesmoke; background-color: rgba(82, 79, 78, 0.568); transition: ease-in-out .5s; } .name { background: #444; } .genre { background-color: rgba(240, 101, 50, 0.411) } .toggler { cursor: pointer; -webkit-user-select: none; user-select: none; background-color: rgba(245, 62, 6, 0.658); } .addremove { display: flex; justify-content: center; align-items: center; padding-top: 10px; padding-bottom: 15px; color: coral; font-weight: 900; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Tabela</title> </head> <!--TABLE--> <body> <div class="container"> <table class="table"> <thead> <tr> <th class="name">Name</th> <th class="genre">Genre</th> <th class="toggler" onclick="sortTable(2)">Rating</th> </tr> </thead> <tbody id="tableData"> </tbody> </table> </div> <br> <!--ADD/REMOVE BUTTON--> <div class="addremove"> Name : <input type="text" name="text" id="movieName"> Genre : <input type="text" name="text" id="movieGenre"> Rating : <input type="text" name="rating" id="movieRating"> <button onclick="addTableRow();">Add</button> </div> </div> <script src="app.js"></script> </body> </html>

Answer 1

如果我正确理解了您的问题，那么您可能希望在创建表格期间直接创建按钮。 在 HTML 中，您需要使用适当的标题创建另一个，例如“动作”

然后，您需要调整 addTableRow 和 loadTableData 函数，在最后一个包含按钮后添加一个，例如一个 onclick 事件调用函数“deleteRow(i)”，其中 i 相当于您正在创建的数组元素的 id。

然后将这两个函数中的元素更改为 id="rowi"，其中 "rowi" 中的 "i" 再次是列表中相应数组元素的 id。

txt = txt + `<tr id="row`+i+`"><td>${movieData[i].name}</td><td>${movieData[i].genre}</td><td>${movieData[i].rating}</td><td><button value="Delete" onclick="deleteRow(`+i+`)"></tr>`;

不要忘记为 addTableRow 函数相应地调整此行，以便 i 对应于插入表中的下一个 id。

最后，您创建一个函数 deleteRow(rowid)，它删除整个 id 为 rowid 的内容。

function deleteRow(rowid) {
  document.getElementById(rowid).remove();
}

Answer 2

据我了解，您需要为每一行电影设置一个delete按钮。 如果是这样，您需要在loadTableData()方法本身中创建一个按钮。

并且由于您希望通过单击将电影从列表中完全删除，因此您需要发送 id 或在您的情况下，将电影的索引连同它一起发送，例如，

<td><button onclick="deleteRow(${i});">Delete</button></td>

并相应地创建一个处理程序，像这样，

function deleteRow(i) {
  movieData.splice(i, 1);
  loadTableData(movieData);
}

正如你所看到的，这是有效的。 但是最后调用的loadTableData(movieData)函数负责刷新 UI，但它并没有真正考虑当前的排序视图。 我想你应该能够根据自己的判断来弄清楚或处理。

 'use strict' let movieData = [{ "id": 1, "name": "Network", "genre": "Comedy|Drama", "rating": "68.22" }, { "id": 2, "name": "Kommissarie Späck", "genre": "Comedy", "rating": "30.65" }, { "id": 3, "name": "Pirate, The", "genre": "Adventure|Comedy|Musical|Romance", "rating": "98.22" }, { "id": 4, "name": "Mary and Martha", "genre": "Drama", "rating": "11.15" }, { "id": 5, "name": "Four Days in September (O Que É Isso, Companheiro?)", "genre": "Drama", "rating": "20.35" }, { "id": 6, "name": "Sibling Rivalry", "genre": "Comedy", "rating": "5.91" }, { "id": 7, "name": "Alice in Wonderland", "genre": "Adventure|Children|Fantasy", "rating": "52.69" }, { "id": 8, "name": "Dead Weekend", "genre": "Comedy|Sci-Fi", "rating": "30.84" }, { "id": 9, "name": "Top Hat", "genre": "Comedy|Musical|Romance", "rating": "60.06" }, { "id": 10, "name": "Cleopatra", "genre": "Drama|Romance|War", "rating": "65.39" }, { "id": 11, "name": "For All Mankind", "genre": "Documentary", "rating": "73.24" }, { "id": 12, "name": "Messiah of Evil", "genre": "Horror", "rating": "28.9" }, { "id": 13, "name": "Princess and the Pirate, The", "genre": "Adventure|Comedy|Romance", "rating": "20.41" }, { "id": 14, "name": "Restrepo", "genre": "Documentary|War", "rating": "71.18" }, { "id": 15, "name": "Return to the Blue Lagoon", "genre": "Adventure|Romance", "rating": "67.92" }, { "id": 16, "name": "Convoy", "genre": "Action|Comedy|Drama", "rating": "22.53" }, { "id": 17, "name": "Perfect", "genre": "Drama|Romance", "rating": "86.25" }, { "id": 18, "name": "Son of Babylon (Syn Babilonu)", "genre": "Drama", "rating": "26.54" }, { "id": 19, "name": "Heaven and Earth (Ten to Chi to)", "genre": "Action|Adventure|Drama|War", "rating": "69.39" }, { "id": 20, "name": "Carcasses", "genre": "Documentary", "rating": "3.72" }, { "id": 21, "name": "Repentance", "genre": "Drama|Horror|Thriller", "rating": "55.21" }, { "id": 22, "name": "Loose Change: Second Edition", "genre": "Documentary|Mystery", "rating": "72.22" }, { "id": 23, "name": "Resurrection Man", "genre": "Drama|Thriller", "rating": "74.68" }, { "id": 24, "name": "Green Card", "genre": "Comedy|Drama|Romance", "rating": "35.28" }, { "id": 25, "name": "Micki + Maude", "genre": "Comedy", "rating": "2.02" }, { "id": 26, "name": "Rover, The", "genre": "Crime|Drama", "rating": "18.73" }, { "id": 27, "name": "Dark Horse (Voksne mennesker)", "genre": "Comedy|Drama|Romance", "rating": "28.19" }, { "id": 28, "name": "Street Thief", "genre": "Crime|Documentary", "rating": "67.11" }, { "id": 29, "name": "Woman In Berlin, A (Anonyma - Eine Frau in Berlin)", "genre": "Drama|War", "rating": "13.85" }, { "id": 30, "name": "Expendables, The", "genre": "Action|Adventure|Thriller", "rating": "92.78" }, ]; //Toggle Sort function sortTable(n) { let table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; table = document.getElementById("tableData"); switching = true; dir = 'asc'; while (switching) { switching = false; rows = table.rows; for (i = 0; i < (movieData.length - 1); i++) { shouldSwitch = false; x = rows[i].getElementsByTagName('td')[n]; y = rows[i + 1].getElementsByTagName('td')[n]; if (dir == 'asc') { if (parseFloat(x.innerHTML) > parseFloat(y.innerHTML)) { shouldSwitch = true; break; } } else if (dir == 'desc') { if (parseFloat(x.innerHTML) < parseFloat(y.innerHTML)) { shouldSwitch = true; break; } } } if (shouldSwitch) { rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; switchcount++; } else { if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } } } }; //Add content to the table function addTableRow() { let table = document.getElementById('tableData'); let txt = ''; let movieNameInput = document.getElementById('movieName').value; let movieGenreInput = document.getElementById('movieGenre').value; let movieRatingInput = document.getElementById('movieRating').value; let row = table.insertRow(); txt = txt + `<tr><td>${movieNameInput}</td><td>${movieGenreInput}</td><td>${movieRatingInput}</td></tr>`; row.innerHTML = txt; } function deleteRow(i) { movieData.splice(i, 1); loadTableData(movieData); } window.onload = () => { loadTableData(movieData); } function loadTableData(movieData) { let tableBody = document.getElementById('tableData'); let txt = ''; for (let i = 0; i < movieData.length; i++) { txt = txt + `<tr><td>${movieData[i].name}</td><td>${movieData[i].genre}</td><td>${movieData[i].rating}</td><td><button onclick="deleteRow(${i});">Delete</button></td></tr>`; } tableBody.innerHTML = txt }

 body { background-color: #f2f2f2f2; color: black; font-weight: 500; background-color: rgb(250, 241, 231); } table { border-collapse: collapse; width: 50%; text-align: center; margin: 40px auto; } tr, th { border: 1px solid #cccccc; padding: 8px; font-size: 16px Z; } th { font-weight: bold; text-transform: uppercase; color: bisque; background-color: #444 } tr:nth-child(even) { background: rgba(15, 85, 6, 0.438); } tr:hover { color: whitesmoke; background-color: rgba(82, 79, 78, 0.568); transition: ease-in-out .5s; } .name { background: #444; } .genre { background-color: rgba(240, 101, 50, 0.411) } .toggler { cursor: pointer; -webkit-user-select: none; user-select: none; background-color: rgba(245, 62, 6, 0.658); } .addremove { display: flex; justify-content: center; align-items: center; padding-top: 10px; padding-bottom: 15px; color: coral; font-weight: 900; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Tabela</title> </head> <!--TABLE--> <body> <div class="container"> <table class="table"> <thead> <tr> <th class="name">Name</th> <th class="genre">Genre</th> <th class="toggler" onclick="sortTable(2)">Rating</th> <th class="name">Action</th> </tr> </thead> <tbody id="tableData"> </tbody> </table> </div> <br> <!--ADD/REMOVE BUTTON--> <div class="addremove"> Name : <input type="text" name="text" id="movieName"> Genre : <input type="text" name="text" id="movieGenre"> Rating : <input type="text" name="rating" id="movieRating"> <button onclick="addTableRow();">Add</button> </div> </div> <script src="app.js"></script> </body> </html>

快乐编码！

Answer 3

像这样 ：

添加您的 HTML 代码（表格）