js动态如何删除全部表格?

http://shuaisweet.javaeye.com/blog/328251

解决方案 »

  1.   

    调用这个删除方法就行了：function delAll() {
    var tab=document.getElementById('myTable');
    for(var r=tab.rows.length-2;r>=0;r--) {
    tab.deleteRow(r);
    }
    tab.rows[tab.rows.length-1].cells[1].innerHTML=0;
            tab.rows[tab.rows.length-1].cells[2].innerHTML=0;
    }
      

  2.   

    动态增加的控件需要放在一个大的控件中 比如都放在一个table中
    那要删除的话就直接把table删除
    或者根据你有规律生成的控件拿for循环删除
      

  3.   

    <!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=gbk" />
    <style>
    body{
        margin:0px;
        font-size:12px;
        color:#8f8f8f;
    }
    #menu {
        display:block;
        bottom:2px;
        right:2px;
        width:260px;
        position:fixed;
        border:1px solid #990000;
        padding:2px;
        text-align:center;
        font-weight:bold;
        color:#990000;
        background:#fff;
    }
    * html #menu {
        position:absolute;
    }
    #delete{
        background-image:url('bas_del.gif');
        width:16px;
        height:12px;
        cursor:pointer;
        margin:auto;
    }
    #refer{
        background-image:url('bas_in.gif');
        width:16px;
        height:12px;
        cursor:pointer;
    }
    .Astyle{
        float:left;
        margin:0px 2px;
        width:50px;
        background-color:#000000;
    }
    .both{
        margin:4px 0px 0px 5px;
        float:left;
    }
    </style>
    <script language="javascript">
    function deleteRow(r)
    {
      if(typeof(r)!="undefined"){
      var i=r.parentNode.parentNode.rowIndex;
      var danjia=document.getElementById('myTable').rows[i].cells[1].innerHTML;
      var num=document.getElementById('myTable').rows[i].cells[2].innerHTML;
      document.getElementById('myTable').deleteRow(i);
      var len=parseInt(document.getElementById('myTable').rows.length);
      document.getElementById('myTable').rows[len-1].cells[2].innerHTML=document.getElementById('myTable').rows[len-1].cells[2].innerHTML-num;
      document.getElementById('myTable').rows[len-1].cells[1].innerHTML=document.getElementById('myTable').rows[len-1].cells[1].innerHTML-danjia*num;
     }
     else{
     var tab=document.getElementById('myTable');
      var len=parseInt(tab.rows.length)-1;
    tab.rows[len].cells[2].innerHTML=0;
    tab.rows[len].cells[1].innerHTML=0;
    for(var i=0;i<len;i++){
    tab.deleteRow(i);
    }

     }
    }
    function insRow(x)
      {
      var Name1 = document.getElementById(x+"1").innerHTML; 
      var Name2 = document.getElementById(x+"2").innerHTML; 
      var Name3 = document.getElementById(x+"3").innerHTML;   var x=document.getElementById('myTable').insertRow(0)
      var y=x.insertCell(0)
      var z=x.insertCell(1)
      var m=x.insertCell(2)
      var n=x.insertCell(3)
      y.innerHTML=Name1
      z.innerHTML=Name2
      m.innerHTML=Name3
      n.innerHTML="<div id='delete' onclick='deleteRow(this)'>删除</div>"
      totalcount();
      hj();
    }
    function  totalcount(){
        var tab=document.getElementById('myTable');
        if(tab.rows.length>1) {//没有值时就不计算
            var total=0;
            for(var r=0;r<tab.rows.length-1;r++) {
                total+=parseInt(tab.rows[r].cells[1].innerHTML)*parseInt(tab.rows[r].cells[2].innerHTML);//为了兼容FF所以没使用innerText,不知道还能不能用别的属性来取值
            }
            tab.rows[tab.rows.length-1].cells[1].innerHTML=total;
        }  
    }
    function hj(){
    var tab=document.getElementById('myTable')
    var tr=tab.rows;
    var all=0
    for (var i=0;i<tr.length-1;i++)
        all+=parseInt(tr[i].cells[2].innerHTML)
    tr[i].cells[2].innerHTML=all
    }
    </script>
    </head>
    <body>
    <div id="menu">
    <table border="1" width="100%" cellspacing="0">
    <tr>
        <td width="90">物品</td>
        <td width="40">单价</td>
        <td width="40">数量</td>
        <td>删除</td>
    </tr>
    </table>
    <table id="myTable" border="1" width="100%" cellspacing="0">
    <tr>
        <td width="90">总计</td>
        <td width="40">0</td>
        <td width="40">0</td>
        <td><div id='delete' onclick='deleteRow()'>删除全部</div></td>
    </tr>
    </table>
    </div>
    </div>
    <div style="background-color:#cccccc;width:880px;height:1000px;margin:auto">
        <div class="both">
            <div id="a1" class="Astyle">物品一</div>
            <div id="a2" class="Astyle">5</div>
            <div id="a3" class="Astyle">1</div>
            <div id="refer" class="Astyle" onclick="insRow('a')"></div>
        </div>
        <div style="clear:both"></div>
        <div class="both">
            <div id="b1" class="Astyle">物品二</div>
            <div id="b2" class="Astyle">10</div>
            <div id="b3" class="Astyle">2</div>
            <div id="refer" class="Astyle" onclick="insRow('b')"></div>
        </div>
        <div style="clear:both"></div>
        <div class="both">
            <div id="c1" class="Astyle">物品三</div>
            <div id="c2" class="Astyle">15</div>
            <div id="c3" class="Astyle">3</div>
            <div id="refer" class="Astyle" onclick="insRow('c')"></div>
        </div>
        <div style="clear:both"></div>
        <div class="both">
            <div id="d1" class="Astyle">物品四</div>
            <div id="d2" class="Astyle">20</div>
            <div id="d3" class="Astyle">4</div>
            <div id="refer" class="Astyle" onclick="insRow('d')"></div>
        </div>
        <div style="clear:both"></div>
        <div class="both">
            <div id="e1" class="Astyle">物品五</div>
            <div id="e2" class="Astyle">3</div>
            <div id="e3" class="Astyle">5</div>
            <div id="refer" class="Astyle" onclick="insRow('e')"></div>
        </div>
        <div style="clear:both"></div>
        <div class="both">
            <div id="f1" class="Astyle">物品六</div>
            <div id="f2" class="Astyle">7</div>
            <div id="f3" class="Astyle">6</div>
            <div id="refer" class="Astyle" onclick="insRow('f')"></div>
        </div>
        <div style="clear:both"></div>
    </div>
    <div style="color:#ddd">aaaa</div>
    </body>
    </denter>
    </body>
    </html>试试
      

  4.   

    <!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=gbk" />
    <style>
    body{
        margin:0px;
        font-size:12px;
        color:#8f8f8f;
    }
    #menu {
        display:block;
        bottom:2px;
        right:2px;
        width:260px;
        position:fixed;
        border:1px solid #990000;
        padding:2px;
        text-align:center;
        font-weight:bold;
        color:#990000;
        background:#fff;
    }
    * html #menu {
        position:absolute;
    }
    #delete{
        background-image:url('bas_del.gif');
        width:16px;
        height:12px;
        cursor:pointer;
        margin:auto;
    }
    #refer{
        background-image:url('bas_in.gif');
        width:16px;
        height:12px;
        cursor:pointer;
    }
    .Astyle{
        float:left;
        margin:0px 2px;
        width:50px;
        background-color:#000000;
    }
    .both{
        margin:4px 0px 0px 5px;
        float:left;
    }
    </style>
    <script language="javascript">
    function deleteRow(r)
    {
      if(typeof(r)!="undefined"){
      var i=r.parentNode.parentNode.rowIndex;
      var danjia=document.getElementById('myTable').rows[i].cells[1].innerHTML;
      var num=document.getElementById('myTable').rows[i].cells[2].innerHTML;
      document.getElementById('myTable').deleteRow(i);
      var len=parseInt(document.getElementById('myTable').rows.length);
      document.getElementById('myTable').rows[len-1].cells[2].innerHTML=document.getElementById('myTable').rows[len-1].cells[2].innerHTML-num;
      document.getElementById('myTable').rows[len-1].cells[1].innerHTML=document.getElementById('myTable').rows[len-1].cells[1].innerHTML-danjia*num;
     }
     else{
     var tab=document.getElementById('myTable');
      var len=parseInt(tab.rows.length)-1;
    tab.rows[len].cells[2].innerHTML=0;
    tab.rows[len].cells[1].innerHTML=0;
    for(var i=len-1;i>=0;i--){
    tab.deleteRow(i);
    }

     }
    }
    function insRow(x)
      {
      var Name1 = document.getElementById(x+"1").innerHTML; 
      var Name2 = document.getElementById(x+"2").innerHTML; 
      var Name3 = document.getElementById(x+"3").innerHTML;   var x=document.getElementById('myTable').insertRow(0)
      var y=x.insertCell(0)
      var z=x.insertCell(1)
      var m=x.insertCell(2)
      var n=x.insertCell(3)
      y.innerHTML=Name1
      z.innerHTML=Name2
      m.innerHTML=Name3
      n.innerHTML="<div id='delete' onclick='deleteRow(this)'>删除</div>"
      totalcount();
      hj();
    }
    function  totalcount(){
        var tab=document.getElementById('myTable');
        if(tab.rows.length>1) {//没有值时就不计算
            var total=0;
            for(var r=0;r<tab.rows.length-1;r++) {
                total+=parseInt(tab.rows[r].cells[1].innerHTML)*parseInt(tab.rows[r].cells[2].innerHTML);//为了兼容FF所以没使用innerText,不知道还能不能用别的属性来取值
            }
            tab.rows[tab.rows.length-1].cells[1].innerHTML=total;
        }  
    }
    function hj(){
    var tab=document.getElementById('myTable')
    var tr=tab.rows;
    var all=0
    for (var i=0;i<tr.length-1;i++)
        all+=parseInt(tr[i].cells[2].innerHTML)
    tr[i].cells[2].innerHTML=all
    }
    </script>
    </head>
    <body>
    <div id="menu">
    <table border="1" width="100%" cellspacing="0">
    <tr>
        <td width="90">物品</td>
        <td width="40">单价</td>
        <td width="40">数量</td>
        <td>删除</td>
    </tr>
    </table>
    <table id="myTable" border="1" width="100%" cellspacing="0">
    <tr>
        <td width="90">总计</td>
        <td width="40">0</td>
        <td width="40">0</td>
        <td><div id='delete' onclick='deleteRow()'>删除全部</div></td>
    </tr>
    </table>
    </div>
    </div>
    <div style="background-color:#cccccc;width:880px;height:1000px;margin:auto">
        <div class="both">
            <div id="a1" class="Astyle">物品一</div>
            <div id="a2" class="Astyle">5</div>
            <div id="a3" class="Astyle">1</div>
            <div id="refer" class="Astyle" onclick="insRow('a')"></div>
        </div>
        <div style="clear:both"></div>
        <div class="both">
            <div id="b1" class="Astyle">物品二</div>
            <div id="b2" class="Astyle">10</div>
            <div id="b3" class="Astyle">2</div>
            <div id="refer" class="Astyle" onclick="insRow('b')"></div>
        </div>
        <div style="clear:both"></div>
        <div class="both">
            <div id="c1" class="Astyle">物品三</div>
            <div id="c2" class="Astyle">15</div>
            <div id="c3" class="Astyle">3</div>
            <div id="refer" class="Astyle" onclick="insRow('c')"></div>
        </div>
        <div style="clear:both"></div>
        <div class="both">
            <div id="d1" class="Astyle">物品四</div>
            <div id="d2" class="Astyle">20</div>
            <div id="d3" class="Astyle">4</div>
            <div id="refer" class="Astyle" onclick="insRow('d')"></div>
        </div>
        <div style="clear:both"></div>
        <div class="both">
            <div id="e1" class="Astyle">物品五</div>
            <div id="e2" class="Astyle">3</div>
            <div id="e3" class="Astyle">5</div>
            <div id="refer" class="Astyle" onclick="insRow('e')"></div>
        </div>
        <div style="clear:both"></div>
        <div class="both">
            <div id="f1" class="Astyle">物品六</div>
            <div id="f2" class="Astyle">7</div>
            <div id="f3" class="Astyle">6</div>
            <div id="refer" class="Astyle" onclick="insRow('f')"></div>
        </div>
        <div style="clear:both"></div>
    </div>
    <div style="color:#ddd">aaaa</div>
    </body>
    </denter>
    </body>
    </html>这个满足你的需求了
      

  5.   


    function delAll(obj)
    {
      var tr = obj.parentNode.parentNode.getElementsByTagName("tr");
      for(var i=0;i<=tr.length-1;i++)
      {
        
        if(obj.parentNode != tr[i]){
        tr[i].parentNode.removeChild(tr[i]);
        i--;
        }
      }
      document.getElementById("tddj").innerHTML = "0";
      document.getElementById("tdzj").innerHTML = "0";
      
      
    }<table id="myTable" border="1" width="100%" cellspacing="0">
    <tr>
        <td width="90">总计</td>
        <td width="40" id="tddj">0</td>
        <td width="40" id="tdzj">0</td>
        <td onclick="delAll(this)">删除全部</td>
    </tr>
    </table>