为什么我不能从 JavaScript 中删除表中的行？

Question

我正在尝试从JavaScript中构建一个表，到目前为止一切顺利。主要思想是最后一列将是一个复选框，当它被选中时，该行将被删除。在删除它之前，我需要知道这一行中写了什么，所以我正在检查 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;

然后，我将 name 变量的每次出现都替换为 localname 变量。

我还更改了事件侦听器以收听" click "而不是" CheckboxStateChange "。