删除添加

来源：互联网发布：深圳app软件开发编辑：程序博客网时间：2024/05/26 12:06
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../angular-1.5.5/angular.min.js"></script>    <style>        *{            text-align: center;        }        table{            border-collapse: collapse;            margin: 20px auto;        }        th{            padding: 10px;            border: 1px solid #000;            background: #999999;        }        td{            padding: 10px;            border: 1px solid #000;        }        select{            margin-left: 20px;        }        table tr:nth-child(2n){            background-color: #CCCCCA;        }        tr:hover{            background-color: red;        }        a{            text-decoration: none;            color: #000000;        }    </style>    <script>        var myapp = angular.module("myapp",[]);        myapp.controller("myCtrl",function ($scope) {            $scope.data=[{                name:"张三",                age:"45",                py:"zhangsan",                zw:"总经理"            },{                name:"李四",                age:"43",                py:"lisi",                zw:"设计师"            },{                name:"王五",                age:"40",                py:"wangwu",                zw:"工程师"            },{                name:"赵六",                age:"33",                py:"zhaoliu",                zw:"工程师"            },{                name:"周七",                age:"32",                py:"zhouqi",                zw:"人事经理"            },{                name:"枪火",                age:"30",                py:"qianghuo",                zw:"人事经理"            }];            //过滤敏感字            $scope.search="";            $scope.search2="";            $scope.$watch("search",function (value) {                //console.log(value);                if (value.indexOf("枪火")!=-1){                    alert("包含敏感字");                    $scope.search="";                } else {                    $scope.search2=$scope.search;                }            });            //年龄排序            $scope.sort="--年龄查找--";            $scope.fun=function () {                if ($scope.sort!="--年龄查找--"){                    if ($scope.sort=="按年龄倒序"){                        $scope.revers=true;                    } else if ($scope.sort=="按年龄正序"){                        $scope.revers=false;                    }                }            };            //查找            $scope.find=function () {                if ($scope.search==""||$scope.search2==null){                    alert("请输入姓名");                } else {                    for (var i=0;i<$scope.item.length;i++){                        if ($scope.search!=$scope.item[i].name){                            alert("找不倒匹配项");                            return;                        }                    }                }            };            //添加用户            $scope.show=false;            $scope.del=function () {                $scope.show=true;            };            $scope.push=function () {                for (var i=0;i<$scope.data.length;i++){                    if (! /^\d+$/.test($scope.age)){                        alert("年龄格式错误");                        return;                    }                }                if ($scope.corr==true){                    //console.log(1);                    $scope.data[$scope.index].num=$scope.num;                } else {                    //console.log(0);                    $scope.data.push({name:$scope.name,age:$scope.age,py:$scope.py,zw:$scope.zw});                }                $scope.num="";                $scope.show=false;//添加完成用户就隐藏            };            //删除            $scope.sc=function (index) {                //console.log(index);                $scope.data.splice(index,1);                if (confirm("确认要删除吗?")){                    $scope.splice(index,1);                }            };        })    </script>    <script src="../jquery-1.11.1/jquery-1.11.1.js"></script>    <script>        $(document).ready(function () {            var clo="";            $("tr").mouseenter(function () {                clo=$(this).css("background");                $(this).css("background","red");            })            $("tr").mouseleave(function () {                $(this).css("background",clo);            });        })    </script></head><body ng-app="myapp" ng-controller="myCtrl"><span>姓名查询条件</span>&nbsp;<input type="text" ng-model="search"><select ng-model="sort" ng-click="fun()">    <option>--年龄查找--</option>    <option>按年龄倒序</option>    <option>按年龄正序</option></select><br/><table>    <thead>    <tr>        <th>姓名</th>        <th>年龄</th>        <th>拼音</th>        <th>职位</th>        <th>操作</th>    </tr>    </thead>    <tbody>    <tr ng-repeat="item in data|filter:{name:search}|filter:search2|orderBy:'cz':revers">        <td>{{item.name}}</td>        <td>{{item.age}}</td>        <td>{{item.py}}</td>        <td>{{item.zw}}</td>        <td><button style="cursor: pointer" ng-click="sc($index)">删除</button></td>    </tr>    </tbody></table><button ng-click="find($index)">查询</button><button ng-click="del($index)">添加用户</button><div ng-show="show" style="margin-top: 10px">        <td>姓名</td>        <td><input type="text" ng-model="name"></td><br/>        <br/>        <td>年龄</td>        <td><input type="text" ng-model="age"></td><br/>        <br/>        <td>拼音</td>        <td><input type="text" ng-model="py"></td><br/>        <br/>        <td>职位</td>        <td><input type="text" ng-model="zw"></td><br/>        <td colspan="2"><button ng-click="push()" style="margin-top: 5px">保存</button></td></div></body></html>
阅读全文
0 0
删除 添加

删除添加
