在一个表格里动态添加一行内容,动态添加的一行里有一个DEL<a>标签,
然后点击DEL<a>标签 删除这一行,
怎么获取到这一行怎么删除

解决方案 »

  1.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    function del(){

    }
    </script>
    </head><body>
    <form id="form1" name="form1" method="post" action="">
      <table width="680" height="193" border="1">
        <tr>
          <td>&nbsp;</td>
          <td><a href="javascript:del()">del</a></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
    </form>
    </body>
    </html>
    这是一个简单的,删除里面怎么写 
      

  2.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    function del(){

    }
    </script>
    </head><body>
    <form id="form1" name="form1" method="post" action="">
      <table width="680" height="193" border="1">
        <tr>
          <td>&nbsp;</td>
          <td><a href="javascript:del()">del</a></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td><a href="javascript:del()">del</a></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td><a href="javascript:del()">del</a></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td><a href="javascript:del()">del</a></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td><a href="javascript:del()">del</a></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td><a href="javascript:del()">del</a></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td><a href="javascript:del()">del</a></td>
        </tr>
      </table>
    </form>
    </body>
    </html>
      

  3.   


    <table>
       <tr>
        <td>1</td><td><a href='#' onclick='del(this)' >del</a></td>
       </tr>
       <tr>
        <td>2</td><td><a  href='#' onclick='del(this)'>del</a></td>
      </tr>
    </table>
    <script src="jquery-1.4.4.js"></script>
    <script>
      function getParent(el,tn){while(el&&el.tagName!=tn)el=el.parentNode;return el}
      function del(el){
        var i=getParent(el,'TR').rowIndex,tb=getParent(el,'TABLE');
        tb.deleteRow(i);
      }
     </script>
      

  4.   

    <table>
       <tr>
        <td>1</td><td><a href='#' onclick='del(this)' >del</a></td>
       </tr>
       <tr>
        <td>2</td><td><a  href='#' onclick='del(this)'>del</a></td>
      </tr>
    </table>
    <script>
      function getParent(el,tn){while(el&&el.tagName!=tn)el=el.parentNode;return el}
      function del(el){
        var i=getParent(el,'TR').rowIndex,tb=getParent(el,'TABLE');
        tb.deleteRow(i);
      }
     </script>
      

  5.   

    那个del是动态添加上去的 
    不是自己写的
      

  6.   

    lz可以考虑用jquery,举个简单的例子:
    html:
    <table id="TId">
    <tr><td>aaaaaa</td><td><a href="javascript:void(0)">Del</a></td></tr>
    <tr><td>bbbbbbbb</td><td><a href="javascript:void(0)">Del</a></td></tr>
    <tr><td>cccccccc</td><td><a href="javascript:void(0)">Del</a></td></tr>
    </table> jquery:
    <script type="text/javascript">
          $(document).ready(function() {
               $("#TId a").click(function() {
                $(this).parent().parent().remove();
            });
    });
    </script> 另外lz记得引用jquery文件
      

  7.   

    <div id='divId'></div>
    <script type='text/javascript'>
        function createElements() {
        var _p = document.createElement('p');
        var _a = document.createElement('a');
        _a.onclick = function() {
            this.parentNode.parentNode.removeChild(this.parentNode);
        }
        _p.apendChild(_a);
        document.getElementById('divId').apendChild(_p);
    }
    </script>
      

  8.   


    如果<a>是动态添加的那函数要改为:
    $(document).ready(function() {
                $("#TId a").live("click",function() {
                $(this).parent().parent().remove();
            });
    });
      

  9.   

    我们jquery还没有学,现在只能用JS做,我做的那个现在就是del<a>标签里面的那个删除功能实现不了,点del获取不到是要删除的哪一行
      

  10.   

    用4楼那样就可以,不用jquery,3楼也没用jquery,引用jq那一行可删除掉
      

  11.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    table{width:800px;
    height:auto;
    background-color:lightblue;
    border:1px solid black;}
    th{
    background-color:lightgreen;}
    th,td{
    border-left:1px solid black;
    border-top:1px solid black;
    height:30px;
    font-size:13px;
    text-align:center;}
    </style>
    <script>
    function del(){

    }
    function addNode(){
    var table=document.getElementsByTagName("table")[0];
    var tbody=table.getElementsByTagName("tbody")[0];
    var tradd=document.createElement("tr");
    var tdOne=document.createElement("td");
    var tdTwo=document.createElement("td");
    var tdThree=document.createElement("td");
    var tdFour=document.createElement("td");
    var tdFive=document.createElement("td");
    var tdSix=document.createElement("td");
    tdOne.innerHTML=document.getElementById("name").value;
    tdTwo.innerHTML=document.getElementById("num").value;
    tdThree.innerHTML=document.getElementById("price").value;
    tdFour.innerHTML=document.getElementById("yf").value;
    var sum;
    sum=parseInt(document.getElementById("num").value)*parseFloat(document.getElementById("price").value)+parseInt(document.getElementById("yf").value);
    tdFive.innerHTML=sum;
    tdSix.innerHTML='<a href="javascript:del()">del</a>';
    tradd.appendChild(tdOne);
    tradd.appendChild(tdTwo);
    tradd.appendChild(tdThree);
    tradd.appendChild(tdFour);
    tradd.appendChild(tdFive);
    tradd.appendChild(tdSix);
    tbody.appendChild(tradd);
    }
    </script>
    </head><body>
    <table cellpadding="0" cellspacing="0" border="0" id="goods">
    <tbody>
    <tr>
    <th>商品名称</th>
    <th>数量</th>
    <th>单价</th>
    <th>运费</th>
    <th>合计</th>
    <th>操作</th>
    </tr>
    </tbody>
    </table><br />
    <input type="button" value="添加一行" onclick="addNode()" /><br />
    商品名称:<input type="text" id="name" /><br />
    商品数量:<input type="text" id="num" /><br />
    商品单价:<input type="price" id="price" /><br />
    运费:<input type="text" id="yf" />
    </body>
    </html>
    代码是这样的 
    那个del方法怎么写
      

  12.   

    tdSix.innerHTML='<a href="javascript:del()">del</a>';
    改成==>
    tdSix.innerHTML='<a href="javascript:del(this)">del</a>'
    你这样试试
      

  13.   

    不行
    网页错误详细信息用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; qdesk 2.3.1186.202)
    时间戳: Wed, 9 Jan 2013 06:53:47 UTC
    消息: 'rowIndex' 为空或不是对象
    行: 23
    字符: 5
    代码: 0
    URI: file:///C:/Documents%20and%20Settings/Administrator/桌面/Untitled-2.html
      

  14.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    table{width:800px;
    height:auto;
    background-color:lightblue;
    border:1px solid black;}
    th{
    background-color:lightgreen;}
    th,td{
    border-left:1px solid black;
    border-top:1px solid black;
    height:30px;
    font-size:13px;
    text-align:center;}
    </style>
    <script>
     
       function getParent(el,tn){while(el&&el.tagName!=tn)el=el.parentNode;return el}
      function del(el){
        var i=getParent(el,'TR').rowIndex,tb=getParent(el,'TABLE');
        tb.deleteRow(i);
      }
    function addNode(){
    var table=document.getElementsByTagName("table")[0];
    var tbody=table.getElementsByTagName("tbody")[0];
    var tradd=document.createElement("tr");
    var tdOne=document.createElement("td");
    var tdTwo=document.createElement("td");
    var tdThree=document.createElement("td");
    var tdFour=document.createElement("td");
    var tdFive=document.createElement("td");
    var tdSix=document.createElement("td");
    tdOne.innerHTML=document.getElementById("name").value;
    tdTwo.innerHTML=document.getElementById("num").value;
    tdThree.innerHTML=document.getElementById("price").value;
    tdFour.innerHTML=document.getElementById("yf").value;
    var sum;
    sum=parseInt(document.getElementById("num").value)*parseFloat(document.getElementById("price").value)+parseInt(document.getElementById("yf").value);
    tdFive.innerHTML=sum;
    tdSix.innerHTML='<a href="javascript:;" onclick="del(this)">del</a>';
    tradd.appendChild(tdOne);
    tradd.appendChild(tdTwo);
    tradd.appendChild(tdThree);
    tradd.appendChild(tdFour);
    tradd.appendChild(tdFive);
    tradd.appendChild(tdSix);
    tbody.appendChild(tradd);
    }
    </script>
    </head><body>
    <table cellpadding="0" cellspacing="0" border="0" id="goods">
    <tbody>
    <tr>
    <th>商品名称</th>
    <th>数量</th>
    <th>单价</th>
    <th>运费</th>
    <th>合计</th>
    <th>操作</th>
    </tr>
    </tbody>
    </table><br />
    <input type="button" value="添加一行" onclick="addNode()" /><br />
    商品名称:<input type="text" id="name" /><br />
    商品数量:<input type="text" id="num" /><br />
    商品单价:<input type="price" id="price" /><br />
    运费:<input type="text" id="yf" />
    </body>
    </html>
      

  15.   

    找到A标签父级的TR标签,tr对象上有 rowIndex,就是我们要删除的行下标
    删除表行是  tb.deleteRow(tr.rowIndex); getParent(el,tn),功能:找到el元素父级标签名为tn的节点
    比如:A的父级TR,getParent(A,"TR")