DOM使用Javascript單擊按鈕時刪除表格行

Question

我正在進行一項任務，需要使用Javascript創建表格。

我遇到了，我需要創建一個按鈕和刪除第一排我TBODY元素的問題。

我試過onclick以及addEventListener，他們都沒有爲我工作。

下面是我的代碼

"use strict"; 
 

 
     //Create table 
 
     var table = document.createElement("table"); 
 
     table.border = 1; 
 
     table.width = "100%"; 
 

 
     //Create thead 
 
     var thead = document.createElement("thead"); 
 
     table.appendChild(thead); 
 
     thead.insertRow(0); 
 
     for (var i = 0; i < 3; i++) { 
 
     thead.rows[0].insertCell(i); 
 
     } 
 
     thead.rows[0].cells[0].appendChild(document.createTextNode("Brand")); 
 
     thead.rows[0].cells[1].appendChild(document.createTextNode("Model")); 
 
     thead.rows[0].cells[2].appendChild(document.createTextNode("Price")); 
 

 

 
     //Create tbody 
 
     var tbody = document.createElement("tbody"); 
 
     table.appendChild(tbody); 
 
     for (var i = 0; i < 2; i++) { 
 
     tbody.insertRow(i); 
 
     for (var j = 0; j < 3; j++) { 
 
      tbody.rows[i].insertCell(j); 
 
     } 
 
     } 
 
     tbody.rows[0].cells[0].appendChild(document.createTextNode("Honda")); 
 
     tbody.rows[0].cells[1].appendChild(document.createTextNode("Civic")); 
 
     tbody.rows[0].cells[2].appendChild(document.createTextNode("$17,460")); 
 
     tbody.rows[1].cells[0].appendChild(document.createTextNode("Ford")); 
 
     tbody.rows[1].cells[1].appendChild(document.createTextNode("Focus")); 
 
     tbody.rows[1].cells[2].appendChild(document.createTextNode("$25,540")); 
 

 

 
     var myButton = document.createElement("button"); 
 
     document.getElementsByTagName("button").id = "newButton"; 
 
     var text = document.createTextNode("Confirm to remove first row in tbody"); 
 
     myButton.appendChild(text); 
 

 
     //Append them into body 
 
     document.body.appendChild(table); 
 
     document.body.appendChild(myButton);

我想這樣的代碼：

function removeFirstRow() { 
    var remove = document.getElementsByTagName("tbody"); 
    remove.removeChild(remove.tbody.rows[0]); 
    } 
document.getElementsByTagName("button").onclick=function() { 
    var clickIt = document.getElementsByTagName("button"); 
    if (clickIt.addEventListener) { 
     clickIt.addEventListener("click", removeFirstRow, false); 
    } else if (clickIt.attachEvent) { 
     clickIt.attachEvent("onclick", removeFirstRow); 
    } 
    } 

如何讓我的按鈕來刪除第一行在TBODY當我點擊它？

Answer 1

點擊監聽器可以像下面的例子一樣簡單：

... 
myButton.appendChild(text); 
myButton.addEventListener('click', function() { 
if(tbody.rows[0]){ 
    tbody.rows[0].remove(); 
    } 

}); 

//Append them into body 
... 

編輯： 工作片段：

"use strict"; 
 

 
     //Create table 
 
     var table = document.createElement("table"); 
 
     table.border = 1; 
 
     table.width = "100%"; 
 

 
     //Create thead 
 
     var thead = document.createElement("thead"); 
 
     table.appendChild(thead); 
 
     thead.insertRow(0); 
 
     for (var i = 0; i < 3; i++) { 
 
     thead.rows[0].insertCell(i); 
 
     } 
 
     thead.rows[0].cells[0].appendChild(document.createTextNode("Brand")); 
 
     thead.rows[0].cells[1].appendChild(document.createTextNode("Model")); 
 
     thead.rows[0].cells[2].appendChild(document.createTextNode("Price")); 
 

 

 
     //Create tbody 
 
     var tbody = document.createElement("tbody"); 
 
     table.appendChild(tbody); 
 
     for (var i = 0; i < 2; i++) { 
 
     tbody.insertRow(i); 
 
     for (var j = 0; j < 3; j++) { 
 
      tbody.rows[i].insertCell(j); 
 
     } 
 
     } 
 
     tbody.rows[0].cells[0].appendChild(document.createTextNode("Honda")); 
 
     tbody.rows[0].cells[1].appendChild(document.createTextNode("Civic")); 
 
     tbody.rows[0].cells[2].appendChild(document.createTextNode("$17,460")); 
 
     tbody.rows[1].cells[0].appendChild(document.createTextNode("Ford")); 
 
     tbody.rows[1].cells[1].appendChild(document.createTextNode("Focus")); 
 
     tbody.rows[1].cells[2].appendChild(document.createTextNode("$25,540")); 
 

 

 
     var myButton = document.createElement("button"); 
 
     document.getElementsByTagName("button").id = "newButton"; 
 
     var text = document.createTextNode("Confirm to remove first row in tbody"); 
 
     myButton.appendChild(text); 
 

 
     myButton.addEventListener('click', function() { 
 
     if(tbody.rows[0]){ 
 
     tbody.rows[0].remove(); 
 
     } 
 
     }); 
 

 
     //Append them into body 
 
     document.body.appendChild(table); 
 
     document.body.appendChild(myButton);

Answer 2

添加click事件監聽器並刪除該行（在檢查它存在之後）：

"use strict"; 
 

 
     //Create table 
 
     var table = document.createElement("table"); 
 
     table.border = 1; 
 
     table.width = "100%"; 
 

 
     //Create thead 
 
     var thead = document.createElement("thead"); 
 
     table.appendChild(thead); 
 
     thead.insertRow(0); 
 
     for (var i = 0; i < 3; i++) { 
 
     thead.rows[0].insertCell(i); 
 
     } 
 
     thead.rows[0].cells[0].appendChild(document.createTextNode("Brand")); 
 
     thead.rows[0].cells[1].appendChild(document.createTextNode("Model")); 
 
     thead.rows[0].cells[2].appendChild(document.createTextNode("Price")); 
 

 

 
     //Create tbody 
 
     var tbody = document.createElement("tbody"); 
 
     table.appendChild(tbody); 
 
     for (var i = 0; i < 2; i++) { 
 
     tbody.insertRow(i); 
 
     for (var j = 0; j < 3; j++) { 
 
      tbody.rows[i].insertCell(j); 
 
     } 
 
     } 
 
     tbody.rows[0].cells[0].appendChild(document.createTextNode("Honda")); 
 
     tbody.rows[0].cells[1].appendChild(document.createTextNode("Civic")); 
 
     tbody.rows[0].cells[2].appendChild(document.createTextNode("$17,460")); 
 
     tbody.rows[1].cells[0].appendChild(document.createTextNode("Ford")); 
 
     tbody.rows[1].cells[1].appendChild(document.createTextNode("Focus")); 
 
     tbody.rows[1].cells[2].appendChild(document.createTextNode("$25,540")); 
 

 

 
     var myButton = document.createElement("button"); 
 
     document.getElementsByTagName("button").id = "newButton"; 
 
     var text = document.createTextNode("Confirm to remove first row in tbody"); 
 
     myButton.appendChild(text); 
 
     
 
     //add click event listener 
 
     myButton.addEventListener('click', function() { 
 
     if(tbody.rows[0]){//if the row exists 
 
     tbody.rows[0].remove();//remove it 
 
     } 
 
     }); 
 

 
     //Append them into body 
 
     document.body.appendChild(table); 
 
     document.body.appendChild(myButton);