JavaScript：動態刪除行操作錯誤

Question

我想下面的代碼;

爲什麼deleteRow()當我們第一次點擊刪除按鈕（或刪除行）時不會提示「hi」？令人驚訝的是，它會第二次完美地工作。

HTML

<div style="height: 190px;overflow: auto;left:220px;width:710px;" id="filterTable"> 
      <table id="filterTableBody" style="border-collapse: collapse; border: 1px solid black;width:690px;" border="1"> 
       <tbody><tr bgcolor="#FF6600"> 
      <td><strong> 
        and/or&nbsp;&nbsp;&nbsp; 
       </strong></td> 
       <td><strong> 
        Column Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
       </strong></td> 
       <td><strong> 
        operator&nbsp;&nbsp;&nbsp; 
       </strong></td> 
       <td><strong> 
        Filter&nbsp;&nbsp;&nbsp; 
       </strong></td> 

       <td><strong> 
        Delete&nbsp;&nbsp;&nbsp; 
       </strong></td> 
      </tr> 
      <tr><td>&nbsp;</td><td>WORKGROUP_NAME</td><td>!=</td><td>ABDEL HAMEID</td><td><a href="javascript:deleteRow()"><img src="/images/delete.gif"></a></td></tr></tbody></table> 
      </div> 

的Javascript

function deleteRow(){ 
     var table = document.getElementById('filterTableBody'); 
     var rows1 = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr'); 
     for (var i = 0; i < rows1.length; i++) { 
      rows1[i].onclick = (function() { 
      alert("hi"); 
       table.deleteRow(this.rowIndex); 
       var oTable = document.getElementById('filterTableBody'); 

      //gets rows of table 
      var rowLength = oTable.rows.length; 
      for (i = 1; i < rowLength; i++){ 

        var oCells = oTable.rows.item(i).cells; 
        //gets cells of current row 
        var cellLength = oCells.length-1; 
         for(var j = 0; j < cellLength; j++){ 
          oCells.item(j).innerHTML = ""; 
          break; 
         } 
         break; 
      } 
     }); 
    } 

} 

爲什麼沒有在第一點擊運行的代碼，以及爲什麼它運行在第二個？

Answer 1

此代碼對我的作品。謝謝@harry指出問題。

function deleteRowUI(btndel) { 
      var table=document.getElementById('filterTableBody'); 
      if (typeof(btndel) == "object") { 
       p=btndel.parentNode.parentNode; 
       p.parentNode.removeChild(p); 
       var oTable = document.getElementById('filterTableBody'); 

       //gets rows of table 
       var rowLength = oTable.rows.length; 
       for (var i = 1; i < rowLength; i++){ 

         var oCells = oTable.rows.item(i).cells; 
        //gets cells of current row 
        var cellLength = oCells.length-1; 
         for(var j = 0; j < cellLength; j++){ 
          oCells.item(j).innerHTML = ""; 
          break; 
         } 
         break; 
      } 
     } else { 
      return false; 
     } 
    } 

Answer 2

原因是因爲只有在第一次單擊刪除按鈕時纔會附加行的onclick事件處理程序。

他們必須附加onload本身。你可以像下面：

window.onload = deleteRow; 

Demo Fiddle