动态删除 如何改变总计价格?

function deleteRow(r)
  {
  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;
  }

解决方案 »

  1.   

    简化一下
    function deleteRow(r)
      {
      var i=r.parentNode.parentNode.rowIndex;
    var obj=document.getElementById('myTable')
      var danjia=obj.rows[i].cells[1].innerHTML;
      var num=obj.rows[i].cells[2].innerHTML;
      obj.deleteRow(i);
      var len=parseInt(obj.rows.length);
      obj.rows[len-1].cells[2].innerHTML=obj.rows[len-1].cells[2].innerHTML-num;
      obj.rows[len-1].cells[1].innerHTML=obj.rows[len-1].cells[1].innerHTML-danjia*num;
      }
      

  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=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)
      {
      
      var i=r.parentNode.parentNode.rowIndex
      document.getElementById('myTable').deleteRow(i)
       var tab=document.getElementById('myTable');
       var total=0;
       var num=0;
            for(var j=0;j<tab.rows.length-1;j++) {
            total+=parseInt(tab.rows[j].cells[1].innerHTML)*parseInt(tab.rows[j].cells[2].innerHTML);
            num+=parseInt(tab.rows[j].cells[2].innerHTML);
            }
            tab.rows[tab.rows.length-1].cells[1].innerHTML=total;
            tab.rows[tab.rows.length-1].cells[2].innerHTML=num;
      }
    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
    }
    function del(){
        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;
        }  
    }</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>&nbsp;</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>
    </body>
    </denter>
    </body>
    </html>