动态添加的一行表格 怎么把他取消掉？

<HTML>
<HEAD>
<TITLE>New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">   
  function   InsertRow()   
  {   
      var   thisRow   =   event.srcElement.parentNode.parentNode;   
      var   nextRow   =   thisRow.nextSibling;   
      var   tr   =   null;   
      if   (nextRow)   
      {   
          tr   =   document.createElement("TR");   
          nextRow.parentNode.insertBefore(tr,   nextRow);   
      }   
      else     
      {   
          var   tbl   =   document.getElementById("table1");   
          tr   =   tbl.insertRow();   
      }   
    
      
      var   td   =   tr.insertCell();   
      td.innerText   =   "new   add";   
      td   =   tr.insertCell(); 
  }   
</script>
</HEAD>
<BODY>
<TABLE id="table1" border="1">
<TR>
<TD>aaaa</TD>
<TD><a href="#" onclick="InsertRow();">111111</a></TD>
</TR>
<TR>
<TD>bbbbb</TD>
<TD><a href="#" onclick="InsertRow();">22222</a></TD>
</TR>
<TR>
<TD>ccccc</TD>
<TD><a href="#" onclick="InsertRow();">33333</a></TD>
</TR>
<TR>
<TD>dddddd</TD>
<TD><a href="#" onclick="InsertRow();">444444</a></TD>
</TR>
</TABLE>
</BODY>
</HTML>

解决方案 »

  1.   

    function   InsertRow()   
      {   
          var   thisRow   =   event.srcElement.parentNode.parentNode;   
          var   nextRow   =   thisRow.nextSibling;
          if (typeof(thisRow.flag)=="undefined" || !thisRow.flag) {
          var   tr = table1.insertRow(thisRow.rowIndex + 1); 
          var   td = tr.insertCell();   
          td.innerText   =   "new   add";   
          td   =   tr.insertCell(); 
          thisRow.flag = true;
    } else {
    table1.deleteRow(thisRow.rowIndex + 1);
    thisRow.flag = false;
    }
      }
      

  2.   

    我想问问 
    var   thisRow   =   event.srcElement.parentNode.parentNode;   
    这个还有其他的方法吗？除了document.getElementById("id")这个还有别的方法吗？谢谢
      

  3.   

    不取消，隐藏也可以啊，当然，这个应该不合你要求，因为没有动态添加行
    <script type="text/javascript">
    function toggleDisplay(id){
    document.getElementById(id).style.display == "none"?document.getElementById(id).style.display="":document.getElementById(id).style.display="none";
    }
    </script><table>
    <tr>
    <td><a href="javascript:toggleDisplay('b');void(0);">aa</a></td>
    </tr>
    <tr id="b" style="display:none;">
    <td>asdfasdfasdf</td>
    </tr>
    </table>