为什么我不能从 javascript 中删除 table 中的一行？

Question

我正在尝试从 JavaScript 构建一个 table，到目前为止一切顺利。主要思想是最后一列将是一个复选框，当它被选中时，该行将被删除。在我删除它之前，我需要知道这一行写了什么，所以我正在检查 id。由于某种原因，它不起作用。有人能帮我吗？谢谢

这是构建函数：

 function build(name){

   var myTableDiv = document.getElementById("alertsDiv");
   var table = document.createElement('TABLE');
   var tr;
   var i, j;


   table.style="width:90%; text-align: center; font-size: 13px; border: 1px   solid black; border-collapse: collapse";
   table.id = "tbAlerts";
   var tableBody = document.createElement('TBODY');
   table.appendChild(tableBody);
   tableBody.id = "tbBody";

   //users is an array 
   for ( i=0; i< Users.length ; i++) {
     tr = document.createElement('TR');
     tr.id = name+" row";

     //alert("this is the tr id: " +tr.id);
     tableBody.appendChild(tr);

     //the time
     td = document.createElement('TD');
     var d = new Date();
     td.appendChild(document.createTextNode( d.getHours() +":"+ d.getMinutes() +":"+ d.getSeconds() ));
     tr.appendChild(td);

     //severity
     td = document.createElement('TD');
     td.appendChild(document.createTextNode("minor"));
     tr.appendChild(td);

     //alert
     var td = document.createElement('TD');
     td.appendChild(document.createTextNode(name + " is dead"));
     tr.appendChild(td);

     //comments
     td = document.createElement('TD');
     var txtBox = document.createElement('INPUT');
     txtBox.type = 'text';
     txtBox.placeholder="comments";
     td.appendChild(txtBox);
     tr.appendChild(td);

     //Acknowledge - ***THIS IS THE IMPORTANT THING***
     td = document.createElement('TD');
     var newCheckBox = document.createElement('INPUT');
     newCheckBox.type = 'checkbox';
     rowsNum++;
     newCheckBox.name=name;
     newCheckBox.addEventListener("CheckboxStateChange", cleanAlert, false);
     td.width='10px';
     td.appendChild(newCheckBox);
     tr.appendChild(td);
 }

myTableDiv.appendChild(table);
}

这是删除函数：

function cleanAlert(event) {
  var checkbox = event.target;
  var rowIndex;

  rowIndex = document.getElementById(checkbox.name + " row").rowIndex;
  document.getElementById("tbAlerts").deleteRow(rowIndex);
}

Answer 1

我不确定您的构建函数是如何被调用的，但是我给每个 checkbox 一个唯一的名称，而不是 build() 函数的 name 参数。看到这个 jsFiddle.

注意 for 循环中的以下行：

var localname = name + i;

然后我用 localname 变量替换了 name 变量的每一次出现。

我还更改了 eventListener 以监听“click”而不是“CheckboxStateChange”。

为什么我不能从 javascript 中删除 table 中的一行？

why can't i delete a row in table from javascript?

html

checkbox

input

event-listener

event-handling