[英]How to delete Row in table on 'Delete' button
我想对我的问题有更好的解决方案。 而不是删除 innerText 值并隐藏删除按钮。 它在表单中留下空间，因为它没有被删除而是隐藏。 object 已成功从阵列中移除，但如何移除整行？ 任何帮助或提示表示赞赏！
// Student Constructor Object let students = []; function Student(id, name, surname, points){ this.id = id; this.name = name; this.surname = surname; this.points = points; this.DidPass = function(){ if(this.points > 50){ console.log('PASS'); }else if(this.points < 50){ console.log('FAILED') } } } // Create Student function createStudent(){ let studentId = document.getElementById('studentID').value; let studentName = document.getElementById('studentName').value; let studentSurname = document.getElementById('studentSurname').value; let studentPoints = document.getElementById('studentPoints').value; let newStudent = new Student(studentId,studentName,studentSurname,studentPoints); students.push(newStudent); let PassNot = true; for(let i = 0; i < students.length; i++){ PassNot = students[i].DidPass(); } // Delete Btn let btnDelete = document.createElement('button'); btnDelete.classList.add('btnDelete'); btnDelete.innerHTML = 'Delete Record' btnDelete.onclick = function(){ for(let j = 0; j < students.length; j++){ if(studentId == students[j].id){ students.splice(j); tdShowID.innerText = ''; tdShowName.innerText = ''; tdShowSurname.innerText = ''; tdShowPoints.innerText = ''; tdShowDidPass.innerText = ''; btnDelete.style.display = 'none'; } } } let table = document.getElementById('table') let tr = document.createElement('tr'); let tdShowID = document.createElement('td'); tdShowID.innerText = studentId; let tdShowName = document.createElement('td'); tdShowName.innerText = studentName; let tdShowSurname = document.createElement('td'); tdShowSurname.innerText = studentSurname; let tdShowPoints = document.createElement('td'); tdShowPoints.innerText = studentPoints; let tdShowDidPass = document.createElement('td'); tdShowDidPass.innerText = PassNot; table.appendChild(tr); table.appendChild(tdShowID); table.appendChild(tdShowName); table.appendChild(tdShowSurname); table.appendChild(tdShowPoints); table.appendChild(tdShowDidPass); table.appendChild(btnDelete); } // Logic function checkIfStudentExists(studentId){ return students.some(student => student.id === studentId); } // Create Student let btnSubmit = document.getElementById('btnSubmit'); btnSubmit.onclick = function(){ createStudent(); }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link href = './style/style.css' rel='stylesheet'> <title>Student App</title> </head> <body> <div id="container"> <div id="formField" class = 'flx'> <label for = 'studentID'>Student ID</label> <input id = 'studentID' name = 'studentID' placeholder = 'student ID' required> <label for = 'studentName'>Student Name</label> <input id = 'studentName' name = 'studentName' placeholder = 'student name' required> <label for = 'studentSurname'>Student Surname</label> <input id = 'studentSurname' name = 'studentSurname' placeholder = 'student surname' required> <label for = 'studentPoints'>Student Points</label> <input id = 'studentPoints' name = 'studentPoints' placeholder = 'student points' required> <button id = 'btnSubmit'>Submit</button> </div> <hr> <div id="results"> <table id = 'table'> <tr> <td>Student ID</td> <td>Student Name</td> <td>Student Surname</td> <td>Student Points</td> <td>Student Grade</td> <td>Delete Record</td> </tr> <tr id = 'tr'> </tr> </table> </div> </div> <script src = './js/app.js'></script> </body> </html>
在解决间距/隐藏问题之前，有许多问题需要纠正。
您的表格未正确形成。 如果您查看 output，您会发现学生数据只是放在<tr>标签之间，而不是放在tr标签内。
您的 header 行位于tr而不是td中。 除非您只想对table body做一些特定的事情，否则这没有任何问题。
没有tbody元素 - 应该有，因为它使您的编码更容易
您将所有内容放入table元素中。 tr元素是唯一进入table的元素 - 请注意，我将其更改为tbdody
现在所有这些事情都解决了，您的问题的答案是将以下代码添加到您的button的click处理程序中：
e.target.parentElement.parentElement.removeChild(e.target.parentElement);
这将从表中删除tr 。
您将在下面看到实现：
// Student Constructor Object let students = []; function Student(id, name, surname, points) { this.id = id; this.name = name; this.surname = surname; this.points = points; this.DidPass = function() { if (this.points > 50) { console.log('PASS'); } else if (this.points < 50) { console.log('FAILED') } } } // Create Student function createStudent() { let studentId = document.getElementById('studentID').value; let studentName = document.getElementById('studentName').value; let studentSurname = document.getElementById('studentSurname').value; let studentPoints = document.getElementById('studentPoints').value; let newStudent = new Student(studentId, studentName, studentSurname, studentPoints); students.push(newStudent); let PassNot = true; for (let i = 0; i < students.length; i++) { PassNot = students[i].DidPass(); } // Delete Btn let btnDelete = document.createElement('button'); btnDelete.classList.add('btnDelete'); btnDelete.innerHTML = 'Delete Record' btnDelete.onclick = function(e) { e.target.parentElement.parentElement.removeChild(e.target.parentElement); for (let j = 0; j < students.length; j++) { if (studentId == students[j].id) { students.splice(j); tdShowID.innerText = ''; tdShowName.innerText = ''; tdShowSurname.innerText = ''; tdShowPoints.innerText = ''; tdShowDidPass.innerText = ''; btnDelete.style.display = 'none'; } } } let tableBody = document.getElementsByTagName('tbody')[0]; let tr = document.createElement('tr'); let tdShowID = document.createElement('td'); tdShowID.innerText = studentId; let tdShowName = document.createElement('td'); tdShowName.innerText = studentName; let tdShowSurname = document.createElement('td'); tdShowSurname.innerText = studentSurname; let tdShowPoints = document.createElement('td'); tdShowPoints.innerText = studentPoints; let tdShowDidPass = document.createElement('td'); tdShowDidPass.innerText = PassNot; tr.appendChild(tdShowID); tr.appendChild(tdShowName); tr.appendChild(tdShowSurname); tr.appendChild(tdShowPoints); tr.appendChild(tdShowDidPass); tr.appendChild(btnDelete); tableBody.appendChild(tr); } // Logic function checkIfStudentExists(studentId) { return students.some(student => student.id === studentId); } // Create Student let btnSubmit = document.getElementById('btnSubmit'); btnSubmit.onclick = function() { createStudent(); }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link href='./style/style.css' rel='stylesheet'> <title>Student App</title> </head> <body> <div id="container"> <div id="formField" class='flx'> <label for='studentID'>Student ID</label> <input id='studentID' name='studentID' placeholder='student ID' required> <label for='studentName'>Student Name</label> <input id='studentName' name='studentName' placeholder='student name' required> <label for='studentSurname'>Student Surname</label> <input id='studentSurname' name='studentSurname' placeholder='student surname' required> <label for='studentPoints'>Student Points</label> <input id='studentPoints' name='studentPoints' placeholder='student points' required> <button id='btnSubmit'>Submit</button> </div> <hr> <div id="results"> <table id='table'> <th> <td>Student ID</td> <td>Student Name</td> <td>Student Surname</td> <td>Student Points</td> <td>Student Grade</td> <td>Delete Record</td> </th> <tbody> </tbody> </table> </div> </div> <script src='./js/app.js'></script> </body> </html>
如何在Angular4中删除表中的行。 删除按钮在每一行中
[英]How to delete a row in a table in Angular4 . The delete button is in each row
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.