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);

使用Javascript

2 个答案: