批量删除
来源：互联网 发布：查看数据库表空间 编辑：程序博客网 时间：2024/06/05 17:35
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> table{ border-collapse: collapse; } th,td{ padding: 10px; border: 1px solid #000; } </style> <script src="../angular-1.5.5/angular.min.js"></script> <script> var myapp=angular.module("myapp",[]); myapp.controller("myCtrl",function($scope){ $scope.data=[{ "name":"三星", "price":"3000", "has":true, "check":false },{ "name":"huawei", "price":"3000", "has":true, "check":false },{ "name":"苹果", "price":"6000", "has":true, "check":false },{ "name":"小米", "price":"2000", "has":true, "check":false }]; //删除 $scope.del=function(index){ console.log(index); $scope.data.splice(index,1); }; //全选 $scope.checkAll=false; $scope.check2=function(){ if($scope.checkAll==true){ for(var i=0;i<$scope.data.length;i++){ $scope.data[i].check=true; } }else{ for(var i=0;i<$scope.data.length;i++){ $scope.data[i].check=false; } } }; //反着全选 var n=0; $scope.count=function(index){ //console.log(index); if($scope.data[index].check==true){ n++; }else{ n-- } console.log(n); if(n==$scope.data.length){ $scope.checkAll=true; }else{ $scope.checkAll=false; } }; //批量删除的方法 $scope.delAll=function(){ for(var i=0;i<$scope.data.length;i++){ if($scope.data[i].check==true){ $scope.data.splice(i,1); i--; } } } }) </script></head><body ng-app="myapp" ng-controller="myCtrl"><table> <thead> <tr> <th>序号</th> <th><input type="checkbox" ng-model="checkAll" ng-click="check2()">全选</th> <th>品牌</th> <th>价格</th> <th>是否有货</th> <th>操作<button ng-click="delAll()">批量删除</button></th> </tr> </thead> <tbody> <tr ng-repeat="item in data"> <td>{{$index}}</td> <td><input type="checkbox" ng-model="item.check" ng-click="count($index)"></td> <td>{{item.name}}</td> <td>{{item.price}}</td> <td>{{item.has}}</td> <td><button ng-click="del($index)">删除</button></td> </tr> </tbody></table></body></html>第二个<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> table{ border-collapse: collapse; } th,td{ padding: 10px; border: 1px solid #000; } span{ display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; background: #eee; } </style> <script src="../angular-1.5.5/angular.min.js"></script> <script> var items=[{ name:"sx", count:4, price:200 },{ name:"pg", count:2, price:100 },{ name:"hw", count:1, price:100 }]; var myapp=angular.module("myapp",[]); myapp.controller("myCtrl",function($scope){ $scope.items=items; $scope.min=function(index){ $scope.items[index].count--; if($scope.items[index].count<=0){ $scope.items[index].count=0; } }; $scope.add=function(index){ $scope.items[index].count++; }; $scope.del=function(index){ if(confirm("确定吗？")==true){ $scope.items.splice(index,1); } }; $scope.count=function(){ var n=0; for(var i=0;i<$scope.items.length;i++){ n+=$scope.items[i].price*$scope.items[i].count } if(n>1100){ $scope.yf=0; }else{ $scope.yf=10; } return n; }; /* $scope.$watch("count()",function(value){ //console.log(value) if(value>1100){ $scope.yf=0; }else{ $scope.yf=10; } })*/ }) </script></head><body ng-app="myapp" ng-controller="myCtrl"><table> <thead> <tr> <th>名称</th> <th>数量</th> <th>价格</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody> <tr ng-repeat="item in items"> <td>{{item.name}}</td> <td><span ng-click="min($index)">-</span><input type="text" ng-model="item.count"><span ng-click="add($index)">+</span></td> <td>{{item.price}}</td> <td>{{item.price*item.count}}</td> <td><button ng-click="del($index)">删除</button></td> </tr> </tbody></table><p>应付金额<a>{{count()}}</a></p><p>邮费<a>{{yf}}</a></p><p>师父金额<a>{{count()+yf}}</a></p></body></html>
第三个<!DOCTYPE html><html lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <title>购物车</title> <style type="text/css"> h1 { text-align:center; } table { margin:0 auto; width:60%; border:2px solid #aaa; border-collapse:collapse; } table th, table td { border:2px solid #aaa; padding:5px; } th { background-color:#eee; } </style> <script type="text/javascript" src="../jquery-1.11.1/jquery-1.11.1.js"></script> <script type="text/javascript"> function add_shoppingcart(btn){//将btn(dom)转换为jQuery对象 //先获取商品名字和单价还有库存以备后面使用 var $tds = $(btn).parent().siblings(); //$tds.eq(0)是jQuery对象 $tds[0]是DOM对象 var name = $tds.eq(0).html();//string var price = $tds.eq(1).html();//string var stock = $tds.eq(3).html();//string //查看库存是否还有<=0 if(stock <= 0){ return; } //无论购物车中是否有该商品,库存都要-1 $tds.eq(3).html(--stock); //在添加之前确定该商品在购物车中是否存在,若存在,则数量+1,若不存在则创建行 var $trs = $("#goods>tr"); for(var i=0;i<$trs.length;i++){ var $gtds = $trs.eq(i).children(); var gName = $gtds.eq(0).html(); if(name == gName){//若存在 var num = parseInt($gtds.eq(2).children().eq(1).val()); $gtds.eq(2).children().eq(1).val(++num);//数量+1 //金额从新计算 $gtds.eq(3).html(price*num); return;//后面代码不再执行 } } //若不存在,创建后追加 var li = "<tr>"+ "<td>"+name+"</td>"+ "<td>"+price+"</td>"+ "<td align='center'>"+ "<input type='button' value='-' onclick='decrease(this);'/> "+ "<input type='text' size='3' readonly value='1'/> "+ "<input type='button' value='+' onclick='increase(this);'/>"+ "</td>"+ "<td>"+price+"</td>"+ "<td align='center'>"+ "<input type='button' value='x' onclick='del(this);'/>"+ "</td>"+ "</tr>"; //追加到#goods后面 $("#goods").append($(li)); //总计功能 total(); } //辅助方法--单击购物车中的"+" "-" "x"按钮是找到相关商品所在td,以jQuery对象返回 function findStock(btn){ var name = $(btn).parent().siblings().eq(0).html();//获取商品名字 //注意table默认有行分组,若此处使用 $("#table1>tr:gt(0)")则找不到任何tr var $trs = $("#table1>tbody>tr:gt(0)"); for(var i=0;i<$trs.length;i++){ var fName = $trs.eq(i).children().eq(0).html(); if(name == fName){//找到匹配的商品 return $trs.eq(i).children().eq(3); } } } //增加"+"功能 function increase(btn){ //获取该商品库存看是否<=0 var $stock = findStock(btn); var stock = $stock.html(); if(stock <= 0){ return; } //库存-1 $stock.html(--stock); //购物车数据改变 var $td = $(btn).prev(); var num = parseInt($td.val());//number //num此时为number类型(在计算时会自动转换为number类型) $td.val(++num); //获取单价,再加计算前要先转换为number类型 var price = parseInt($(btn).parent().prev().html()); $(btn).parent().next().html(num*price); //总计功能 total(); } //减少"-"功能 function decrease(btn){ //该商品数量=1时候不能再减少 var num = parseInt($(btn).next().val()); if(num <= 1){ return; } var $stock = findStock(btn); //库存+1 var stock = $stock.html(); $stock.html(++stock); //商品数量-1 $(btn).next().val(--num); //从新计算金额 var price = parseInt($(btn).parent().prev().html()); $(btn).parent().next().html(price*num); //总计功能 total(); } //"x"删除按钮功能 function del(btn){ //将商品数量归还库存 var $stock = findStock(btn); var stock = parseInt($stock.html()); var num = parseInt($(btn).parent().prev().prev().children().eq(1).val()); $stock.html(num + stock); //清空改行商品列表 $(btn).parent().parent().remove(); //总计功能 total(); } //总计功能 function total(){ //获取所有购物车中的trs var $trs = $("#goods tr"); var amount = 0; for(var i=0;i<$trs.length;i++){ var money = parseInt($trs.eq(i).children().eq(3).html()); amount += money; } //写入总计栏 $("#total").html(amount); } </script></head><body><h1>真划算</h1><table id="table1"> <tbody><tr> <th>商品</th> <th>单价(元)</th> <th>颜色</th> <th>库存</th> <th>好评率</th> <th>操作</th> </tr> <tr> <td>罗技M185鼠标</td> <td>80</td> <td>黑色</td> <td>5</td> <td>98%</td> <td align="center"> <input value="加入购物车" onclick="add_shoppingcart(this);" type="button"> </td> </tr> <tr> <td>微软X470键盘</td> <td>150</td> <td>黑色</td> <td>9028</td> <td>96%</td> <td align="center"> <input value="加入购物车" onclick="add_shoppingcart(this);" type="button"> </td> </tr> <tr> <td>洛克iphone6手机壳</td> <td>60</td> <td>透明</td> <td>672</td> <td>99%</td> <td align="center"> <input value="加入购物车" onclick="add_shoppingcart(this);" type="button"> </td> </tr> <tr> <td>蓝牙耳机</td> <td>100</td> <td>蓝色</td> <td>8937</td> <td>95%</td> <td align="center"> <input value="加入购物车" onclick="add_shoppingcart(this);" type="button"> </td> </tr> <tr> <td>金士顿U盘</td> <td>70</td> <td>红色</td> <td>482</td> <td>100%</td> <td align="center"> <input value="加入购物车" onclick="add_shoppingcart(this);" type="button"> </td> </tr> </tbody></table><h1>购物车</h1><table> <thead> <tr> <th>商品</th> <th>单价(元)</th> <th>数量</th> <th>金额(元)</th> <th>删除</th> </tr> </thead> <tbody id="goods"> </tbody> <tfoot> <tr> <td colspan="3" align="right">总计</td> <td id="total"></td> <td></td> </tr> </tfoot></table></body></html>
阅读全文
0 0
