如何使用Javascript删除表格行

Question

我使用Javascript function addRow(id)创建了新行，但我无法删除它。当我点击删除按钮时，没有任何反应。我究竟做错了什么？ 我很感激任何意见。

<table> 
<tr> 
    somethingElse 
</tr> 
<tr> 
    <td colspan="5"> 
     <script type="text/javascript"> 
      var inputCount = 0; 

      function addRow(id) { 
       //set row number 
       inputCount++; 
       var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0]; 
       var row = document.createElement("TR"); 

       var td1 = document.createElement("TD"); 
       var td2 = document.createElement("TD"); 
       var td3 = document.createElement("TD"); 
       var td4 = document.createElement("TD"); 
       var td5 = document.createElement("TD"); 

       var t1 = document.createElement('div'); 
       var t2 = document.createElement('div'); 
       var t3 = document.createElement('div'); 
       var t4 = document.createElement('div'); 
       var t5 = document.createElement('div'); 

       t1.innerHTML = "Name of school: "; 
       t2.innerHTML = "<input type='text' Width='180px' name='items_" + inputCount + "'>"; 
       t3.innerHTML = "Title aquired: "; 
       t4.innerHTML = "<input type='text' Width='180px' name='value_" + inputCount + "'>"; 
       t5.innerHTML = "<input type='Button' class='Button' onclick='deleteLine(this)' value='Remove'>"; 

       td1.appendChild(t1) 
       td2.appendChild(t2) 
       td3.appendChild(t3) 
       td4.appendChild(t4) 
       td5.appendChild(t5) 

       row.appendChild(td1); 
       row.appendChild(td2); 
       row.appendChild(td3); 
       row.appendChild(td4); 
       row.appendChild(td5); 

       tbody.appendChild(row); 
      } 

      function deleteLine(object) { 
       var table = document.getElementsByTagName("myTable")[0]; 
       var tBody = table.getElementsByTagName("tbody")[0]; 
       var rows = tBody.getElementsByTagName("tr"); 

       while (object.tagName != 'TR') { 
        object = object.parentNode; 
       } 
       var row = rows[object.rowIndex]; 

       tBody.removeChild(row); 
      } 
     </script> 
     <table id="myTable"> 
      <tr> 
       <td align=right> 
        Name of school: 
       </td> 
       <td> 
        <asp:TextBox ID="TextBox1" runat="server" Width="180px"></asp:TextBox> 
       </td> 
       <td align=right> 
        Title aquired: 
       </td> 
       <td> 
        <asp:TextBox ID="TextBox2" runat="server" Width="180px"></asp:TextBox> 
       </td> 
       <td> 
        <a href="javascript:addRow('myTable')">Add more education</a> 
       </td>           
      </tr> 
     </table>         
    </td> 
</tr> 
<tr> 
    somethingElse 
</tr> 
</table> 

Answer 1

我想这

var table = document.getElementsByTagName("myTable")[0]; 

最好是

​​

功能可以更简单，如果你想：

function deleteLine(object) { 
      while (object.tagName != 'TR') { 
       object = object.parentNode; 
      } 
      object.parentNode.removeChild(object); 
     } 

Answer 2

你也可以试试这个。 ...

<script type="text/javascript"> 
      var inputCount = 0; 

      function addRow(id) { 
       //set row number 
       inputCount++; 
       var tbody = document.getElementById(id); 
       html="" 
        var row = document.createElement("TR"); 
        row.setAttribute("id", "row"+inputCount) 
        tbody.appendChild(row); 
       html +="<td>Name of school:</td>" 
       html +="<td><input type='text' Width='180px' name='items_" + inputCount + "'></td>" 
       html +="<td><input type='text' Width='180px' name='items_" + inputCount + "'></td>" 
       html +="<td>Title aquired: </td>" 
       html +="<td><input type='Button' class='Button' onclick=deleteLine('row"+inputCount+"') value='Remove'></td>" 
       alert(html) 
       row.innerHTML = html 




      } 

      function deleteLine(index) { 
       table = document.getElementById("myTable") 
      row = document.getElementById(index) 

       table.removeChild(row); 
      } 
     </script>