jQuery的增删改查完善

来源：互联网发布：知乎福利收藏夹编辑：程序博客网时间：2024/05/16 08:29

单个删除的  批量删除的（复选框）  全部删除的

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>购物车</title>    <script src="jquery-3.2.1.js"></script>    <script src="angular1.4.6.min.js"></script>    <style>        span {            padding-left: 50px;            padding-right: 50px;        }    </style></head><body ng-app="myApp" ng-controller="MyController"><div>    <input placeholder="输入关键字" ng-model="search">    <button ng-click="removeall()">全部删除</button>    <button ng-click="removesome()">批量删除</button></div><div class="container">    <div>        <ul class="list-group">            <li style="border:1px solid black;list-style-type: none; ">                <span><input type="checkbox"></span>                <span ng-click="desc=!desc">编号</span>                <span ng-click="desc=!desc">名称</span>                <span ng-click="desc=!desc">价格</span>                <span>库存</span>                <span>                    数据操作                </span>            </li>            <li ng-repeat="shop in shopList|filter:{'name':search}|orderBy:col:desc"                style="border:1px solid black;list-style-type: none; ">                <span><input type="checkbox" ng-click="p1(shop)" value="{{shop.name}}"></span>                <span>{{shop.number}}</span>                <span>{{shop.name}}</span>                <span>{{shop.price|currency}}</span>                <span>{{shop.num|number:2}}</span>                <button style="background-color: orange;color: white;" ng-click="remove($index)">删除</button>            </li>        </ul>    </div></div><script>    function run(name) {        var result = true;        for (var i = 0; i < updatelist.length; i++) {            if (name == updatelist[i]) {                result = false;            }        }        return result;    }    var updatelist = [];    var app = angular.module("myApp", []);    app.controller("MyController", function ($scope) {        $scope.shopList = [            {number: 1234, name: "茄子", price: "3.20", num: 10},            {number: 5678, name: "白菜", price: "1.20", num: 10},            {number: 1357, name: "韭菜", price: "2.20", num: 10},            {number: 2468, name: "花菜", price: "3.90", num: 10}        ];        $scope.p1 = function (bean) {

//点击事件  得到他的内容 名字 然后使用回调函数判断是否在updatelist中 返回false或者true

//第二次点击的时候取消 这时候数组中已经有了 返回false 走下面    数组中删除取消复选框的名字            var name = bean.name;            if (run(name)) {                updatelist.push(bean.name);            } else {                for (var i = 0; i < updatelist.length; i++) {                    if (name == updatelist[i]) {                        updatelist.splice(i);                    }                }            }        };        $scope.remove = function (index) {            if (confirm('确定删除吗？')) {                $scope.shopList.splice(index, 1);            }        };        $scope.removeall = function () {            var name = $(".myName").val();            if (confirm('确定全部删除吗？')) {                $scope.shopList.splice(0, $scope.shopList.length);            }        };        $scope.removesome = function () {            //var name = $(".myName").val();            if (confirm('确定批量删除吗？')) {                for (i = 0; i < $scope.shopList.length; i++) {                    for (j = 0; j < updatelist.length; j++) {                        if ($scope.shopList[i].name== updatelist[j]) {                            $scope.shopList.splice(i,1);                        }                    }                }            }        };    });</script></body></html>

阅读全文

0 0