为什么我不能从 javascript 中删除表中的一行？答案

【问题标题】：why can't i delete a row in table from javascript?为什么我不能从 javascript 中删除表中的一行？
【发布时间】：2015-04-29 19:39:03
【问题描述】：

我正在尝试从 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);
}

【问题讨论】：

什么不起作用？您是否尝试调试此代码？尝试一次通过每个语句。检查每个变量是否具有正确的值等。
我尝试调试代码。它仅第一次起作用的问题。如果我添加一行并删除它，那没关系，但如果我再做一次，他会给我正确的索引，但什么也不做
这似乎是有价值的信息，我会将此添加到您的问题中。第一次删除该行后，您确定删除函数中的索引仍然与您要删除的行的索引匹配吗？
是的，rowIndex 变量给了我当前索引...

标签： html checkbox input event-handling event-listener

【解决方案1】：

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

注意for-loop 中的以下行：

var localname = name + i;

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

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

【讨论】：