批量删除_批量删除.meta-CSDN博客

本文链接：https://blog.csdn.net/gh323093/article/details/78524008
<!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='-' οnclick='decrease(this);'/> "+
                "<input type='text' size='3' readonly value='1'/> "+
                "<input type='button' value='+' οnclick='increase(this);'/>"+
                "</td>"+
                "<td>"+price+"</td>"+
                "<td align='center'>"+
                "<input type='button' value='x' οnclick='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="加入购物车" οnclick="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="加入购物车" οnclick="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="加入购物车" οnclick="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="加入购物车" οnclick="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="加入购物车" οnclick="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>
批量删除

“相关推荐”对你有帮助么？
