jquery表格(添加,删除)总计数据+增添数据

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
  <title></title>
  <style>
   .tr1{
    background: red;
   }
   .tr2{
    background: #90EE90;
   }
  </style>
  <script>
   
   
   var index = 1;
   var upindex ;
   var uptr ;
   var allPrice = 0;
   var oldPrice;
   $(document).ready(function(){
    
    $("#btn1").click(function(){
     var _tr;//定义添加的行的开始标签  中间添加class样式
     //设置隔行的颜色
     if(index%2 == 0){
      _tr = "<tr class='tr1'>";
     }else{
      _tr = "<tr class='tr2'>";
     }
     var nameV = $("#id1").val();//得到名字
     var priceV = $("#id2").val();//得到价钱
     var countV = $("#id3").val();//得到数量
     //拼装完整的行
     var newTr = _tr + "<td align='center'>"+index+"</td>"
     +"<td align='center'>"+nameV+"</td>"
     +"<td id='price"+index+"' align='center'>"+priceV+"</td>"
     +"<td align='center'><input type='button' id='jian"+index+"' value='-'/>&nbsp;"
     +"<span>"+countV+"</span>"
     +"&nbsp;<input type='button' id='add"+index+"' value='+'/></td>"
     +"<td align='center' >"+countV*priceV+"</td>"
     +"<td align='center'><input type='button' id='sc"+index+"' value='删除'/>";
     //把行添加到table中
     $("#mytable").append(newTr);
     
     $("#sc"+index).click(function(){
      $(this).parent().parent().remove();//input的parent是td,再parent是tr,然后通过remove删除自己
      //修改总价
      
     });
     $("#jian"+index).click(function(){
      var sl = $(this).next();//得到减号后面的数量
      var newNum = parseInt(sl.text())-1;//数量 -1
      sl.text(newNum);//修改view
      //修改小计
      var price = $(this).parent().prev().text();//得到单价  $(this).parent()当前列td
      var xjTd = $(this).parent().next();//得到 小计 td
      xjTd.text(parseInt(xjTd.text())-parseInt(price));//旧小计 - 单价,得到新小计,显示在view上
      //修改总计
      $("#zj").text(parseInt($("#zj").text()) - parseInt(price));//旧总价 - 单价,得到新总价,显示在view上
      
     });
     $("#add"+index).click(function(){
      var sl = $(this).prev();//得到+号前面的数量
      var newNum = parseInt(sl.text())+1;//数量 +1
      sl.text(newNum);
      //修改小计
      var price = $(this).parent().prev().text();//得到单价
      var xjTd = $(this).parent().next();//得到 小计 td
      xjTd.text(parseInt(xjTd.text())+parseInt(price));//旧小计  + 单价,得到新小计,显示在view上
      //修改总计
      $("#zj").text(parseInt($("#zj").text()) + parseInt(price));//旧总价 + 单价,得到新总价,显示在view上
      
     });
     $("#price"+index).dblclick(function(){//双击事件  把价钱td中的价钱文本 替换为 输入框,同时显示旧价钱
      oldPrice = $(this).text();//保存旧单价 到 全局变量 oldprice中,修改总计时使用
      
      $(this).html("<input type='text' id='input"+index+"' value='"+oldPrice+"'/>");//把价钱td中的价钱文本 替换为 输入框,同时显示旧价钱
      $("#input"+index).blur(function(){//价钱输入框 添加失去焦点事件  ,通过id找到价钱输入框
       var newPrice = $(this).val();//得到新价钱
       var parentTd = $(this).parent();//得到价钱td(input的父亲)
       parentTd.html(newPrice);//把新价钱显示在view上,替换掉输入框
       //修改小计
       var sl = parentTd.next().children()[1].innerText;//next表示价钱输入框的下一个td,children()[1]表示第二个儿子::数量
       parentTd.next().next().text(newPrice*sl);//计算新小计,显示在 小计  td中
//       debugger;
       //修改总价
       $("#zj").text($("#zj").text()-oldPrice*sl+newPrice*sl);//旧的总价 先-此商品旧的小计,再+新的小计
       
      });
     });
     index++;
     //把新的商品的总价钱添加到 所有的总价钱中
     $("#zj").text(parseInt($("#zj").text()) + countV*priceV);
    });
    
    $("#topck").click(function(){
     
     $("input[type='checkbox']").attr("checked",this.checked);
    });
   });
   
  </script>
 </head>
 <body>
  <center>
  
  <table >
   <tr><td>姓名</td><td><input type="text" id="id1"></td></tr>
   <tr><td>价格</td><td><input type="number" id="id2"></td></tr>
   <tr><td>数量</td><td><input type="number" id="id3"></td></tr>
   <tr><td align="center" colspan="2"><input type="button" id="btn1" value="添加" ></td></tr>
  </table>
  <table id="mytable" border="1">
   <tr>
    <th width="40">序号</th>
    <th width="80">姓名</th>
    <th width="80">价格</th>
    <th width="80">数量</th>
    <th width="80">小计</th>
    <th width="120">操作</th>
    
   </tr>
   
   
  </table>
  <table >
   <tr><td>总计:<span id="zj" >0</span></td></tr>
   
  </table>
  </center>
  
 </body>
</html>

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页