表格中动态添加行中，如何实现删除当前行？

     <script type="text/javascript">
          function addRow() {   //添加行
            
        var root = document.getElementById("tbody")
        var allRows = root.getElementsByTagName('tr');
        var allCells = allRows[0].getElementsByTagName('td');
        var newRow = root.insertRow();
        var newCell0 = newRow.insertCell();
        var newCell1 = newRow.insertCell();
        newCell0.innerHTML = allCells[0].innerHTML;
        newCell1.innerHTML = allCells[1].innerHTML;       
    }    function removeRow(r) {   //删除行（这个删除的是第一个。如何改成删除当前选中的行）
        var root = r.parentNode;
        root.deleteRow();
    }
  </script>
<table id="testTable" cellpadding="0" cellspacing="0" class="t1" width="100%" > <tr>
<td></td>
<td><img id="Addrow" src="../image/new.gif" alt="新增"  onclick="addRow()"  /> </td>
</tr>
<tbody id="tbody" >
              <tr >
                <td align="right"><div style=" text-align:right">卡    号：</div></td>
                <td > 
                     <asp:TextBox ID="txtInCardNo" runat="server" MaxLength="19"></asp:TextBox>  <img src="../image/010.gif"  alt="删除" onclick="removeRow(this.parentNode.parentNode)"/>          
      </td>
            </tr>
            </tbody>
</table>

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> New Document </title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <script type="text/javascript">
      <!--
    function delTr(obj){
    obj.parentNode.parentNode.deleteRow(obj.rowIndex);
    }
      //-->
      </script>
     </head> <body>
      <table border="1">
      <tr onclick="delTr(this)">
    <td>1</td>
    <td>1</td>
    <td>1</td>
      </tr>
      <tr onclick="delTr(this)">
    <td>2</td>
    <td>2</td>
    <td>2</td>
      </tr>
      <tr onclick="delTr(this)">
    <td>3</td>
    <td>3</td>
    <td>3</td>
      </tr>
      <tr onclick="delTr(this)">
    <td>4</td>
    <td>4</td>
    <td>4</td>
      </tr>
      </table>
     </body>
    </html>
      

  2.   

    不介意使用jQuery吧<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="../jquery/jquery-1.7b2.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $(".AddRow").click(function () {
                    var template = $("#Template");
                    $("#testTable tbody").append(template.clone(true).removeAttr("id").show(500));
                });
                $(".DeleteRow").click(function () {
                    $(this).parents("table tr").remove();
                });
            });        
      
        </script>
    </head>
    <body>
        <table id="testTable" cellpadding="0" cellspacing="0" class="t1" width="100%">
            <tr>
                <td>
                </td>
                <td>
                    <img src="../image/new.gif" alt="新增" class="AddRow" />
                </td>
            </tr>
            <!--模板行-->
            <tr id="Template" style="display: none">
                <td align="right">
                    <div style="text-align: right">
                        卡 号：</div>
                </td>
                <td>
                    <input type="text" name="name" value="" />
                    <img src="../image/010.gif" alt="删除" class="DeleteRow" />
                </td>
            </tr>
        </table>
    </body>
    </html>