为什么我不能从javascript中删除表中的一行?

时间:2015-04-29 09:43:21

标签: html5 checkbox input event-handling event-listener

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

1 个答案:

答案 0 :(得分:0)

我不确定你的构建函数是如何被调用的,但是 我为每个checkbox提供了一个唯一的名称,而不是name - build()函数的参数。 请参阅此jsFiddle

请注意for - 循环中的以下行:

var localname = name + i;

然后我用name - 变量替换localname - 变量的每个出现。

我还更改了eventListener以收听&#34; click&#34;而不是&#34; CheckboxStateChange&#34;。