[英]How to delete specific row table using an onClick function in DOM?
How to delete a certain specific row using DOM?如何使用 DOM 删除某个特定的行?
and the problem in /line10 when I press the X button it keeps deleting the first row.以及/line10中的问题,当我按下 X 按钮时,它会不断删除第一行。
function render(){
for (let i = 0; i < allMovie.length; i++) {
var tr = document.createElement('tr');
tr.setAttribute("id", "mainTR");
table.appendChild(tr);
var td1 = document.createElement('td');
td1.textContent = allMovie[i].MovieName11;
td1.setAttribute("class", "td1");
tr.appendChild(td1);
var td2 = document.createElement('td');
td2.textContent = allMovie[i].selectPlatform11;
td2.setAttribute("class", "td2");
tr.appendChild(td2);
var td3 = document.createElement('td');
td3.textContent = allMovie[i].randomRate;
td3.setAttribute("class", "td3");
tr.appendChild(td3);
var td4 = document.createElement('td');
td4.textContent = allMovie[i].monthlyPay11;
td4.setAttribute("class", "td4");
tr.appendChild(td4);
var td5 = document.createElement('td');
td5.setAttribute("id", "td5");
td5.innerHTML = `<button onclick=remove()> X </button>`
tr.appendChild(td5);
}
}
function remove() { /line10
var removeOBJ = document.getElementById("mainTR");
return removeOBJ.remove();
}
You can simply use this.
你可以简单地使用this.
parentNode and pass as an args in your remove()
function to remove the clicked tr
element from the table. parentNode并在您的remove()
function 中作为参数传递,以从表中删除单击的tr
元素。
Also id
needs to be unique
for every element so consider using class
instead to avoid issues.此外,每个元素的id
都必须是unique
的,因此请考虑使用class
来避免出现问题。
tr.setAttribute("class", "mainTR"); //use class attr for tr elements
Remove function移除 function
function remove(element) {
element.parentNode.remove(element); //remove the clicked tr
}
Live Working Demo现场工作演示
var allMovie = []; var selectArr = ['netflix', 'Amazon Prime video', 'HBO', 'Hulu', 'Apple TV Plus', 'Disney Plus', 'Crunchyroll']; var selectPlatform = document.getElementById('select-platform'); var table = document.getElementById('table'); for (let i = 0; i < selectArr.length; i++) { var option = document.createElement('option'); option.textContent = selectArr[i]; selectPlatform.appendChild(option); } var form1 = document.getElementById('form'); form1.addEventListener('submit', addfun); function addfun() { event.preventDefault(); //console.log(event) new Movie(event.target[0].value, event.target[1].value, event.target[3].value); clearTable(); render(); // set(); } //get(); render(); clearTable(); render(); /*Constructor*/ function Movie(MovieName, selectPlatform, monthlyPay) { this.MovieName11 = MovieName; this.selectPlatform11 = selectPlatform; this.monthlyPay11 = monthlyPay * 13.99; this.randomRate = generateRandomRate(100, 10); allMovie.push(this); } function render() { for (let i = 0; i < allMovie.length; i++) { var tr = document.createElement('tr'); tr.setAttribute("class", "mainTR"); table.appendChild(tr); var td1 = document.createElement('td'); td1.textContent = allMovie[i].MovieName11; td1.setAttribute("class", "td1"); tr.appendChild(td1); var td2 = document.createElement('td'); td2.textContent = allMovie[i].selectPlatform11; td2.setAttribute("class", "td2"); tr.appendChild(td2); var td3 = document.createElement('td'); td3.textContent = allMovie[i].randomRate; td3.setAttribute("class", "td3"); tr.appendChild(td3); var td4 = document.createElement('td'); td4.textContent = allMovie[i].monthlyPay11; td4.setAttribute("class", "td4"); tr.appendChild(td4); var td5 = document.createElement('td'); td5.setAttribute("id", "td5"); td5.innerHTML = `<button onclick=remove(this.parentNode)> X </button>` tr.appendChild(td5); } } //Remove tr function remove(element) { element.parentNode.remove(element); } //helper function:- function generateRandomRate(max, min) { return Math.floor(Math.random() * (max - min + 1) + min); } function clearTable() { table.innerHTML = ` <tr> <td>Movie Name</td> <td>Favourite streaming platform</td> <td>Movie Rate</td> <td>Your pay monthly on Streaming platforms</td> </tr> ` } function set() { var sendJSON = JSON.stringify(allMovie); localStorage.setItem('allMovie', sendJSON) } function get() { var getJSON = localStorage.getItem('allMovie'); if (getJSON) { allMovie = JSON.parse(getJSON) } }
table, th, td { padding: 1.5%; border: 1px solid black; text-align: center; } button { width: 100%; height: 100%; padding: 2px; margin: 2px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style:css"> </head> <body> <h3> Streaming platforms price per month is.- <mark>13.99$</mark> </h3> <form id="form"> <label>Movie/series Name</label> <input type="text" id="input-form"> <label>Select your favourite streaming platform</label> <select id="select-platform"> </select> <input type="submit" value="submit" id="submit"> <label>Enter how many platforms you watch from(max 7)</label> <input type="number" min="1" max="7"> </form> <table id="table"> <tr> <td>Movie Name</td> <td>Favourite streaming platform</td> <td>Movie Rate</td> </tr> </table> <!-- <td>You pay monthly on streaming platforms</td> --> <script src="app.js"></script> </body> </html>
you are creating the same id for every row您正在为每一行创建相同的 id
tr.setAttribute("id", "mainTR");
so this is invalid as an id must be unique, therefore your dom-selection returns only the first occurance所以这是无效的,因为 id 必须是唯一的,因此您的 dom-selection 仅返回第一次出现
you could append for example the index of the loop to make it unique您可以 append 例如循环的索引以使其唯一
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.