查询添加删除

来源：互联网发布：ios开发用什么数据库编辑：程序博客网时间：2024/06/03 06:26

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="lib/js/ionic.bundle.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           angular.module("jun",[])
           .controller("dd",function($scope,$filter){
//               $scope.peoples=[]
//               .实现用户数据列表展示5分
               $scope.people=[{
                       "name":"张三",
                       "age":45,
                       "pinyin":"zhangsan",
                       "work":"总经理"
                   },{
                       "name":"李四",
                       "age":43,
                       "pinyin":"lisi",
                       "work":"设计师"
                   },{
                       "name":"王五",
                       "age":40,
                       "pinyin":"wangwu",
                       "work":"工程师"
                   },{
                       "name":"赵六",
                       "age":45,
                       "pinyin":"zhaoliu",
                       "work":"工程师"
                   },{
                       "name":"周七",
                       "age":45,
                       "pinyin":"zhouqi",
                       "work":"人事经理"
                   }];
               $scope.add=function(){

               }
               $scope.bc=function(){
                   if (!/^\d+$/.test($scope.age)) {
                       alert("年龄格式错误");
                   }else{
                       $scope.people.push({
                           "name":$scope.name,
                           "age":$scope.age,
                           "pinyin":$scope.pinyin,
                           "work":$scope.work
                       })
                   }
               }
//               实现姓名查询条件框5分，
//               实现查询条件框内的内容为空点击查询按钮时alert提示”请输入姓名”5分，
//               实现按姓名搜索表格内容功能5分，
//               当搜索内容未找到匹配项时提示”未找到内容”5分，
//               当搜索内容有敏感词时，
//               alert提示5分
               $scope.xun="";
               $scope.sel=function(){
                   if($scope.namefilter==""||$scope.namefilter==undefined){
                       alert("请输入姓名");
                   }else{
                       if($scope.namefilter=="三"){
                           alert("有敏感词");
                           $scope.namefilter=""
                       }else{
                           var f=$filter("filter")($scope.people,{"name":$scope.namefilter});
                           if(f==0){
                               alert("未找到内容");
                           }else{
                               $scope.xun=$scope.namefilter;
                           }
                       }
                       return;
                   }



               }
//               实现点击删除时弹出二次确认询问框5分，实现删除功能，删除后从列表中消失5分。
               $scope.del=function($index){
                   var a=confirm("是否删除");
                   if (a) {
                       $scope.people.splice($index,1);
                       alert("删除成功");
                   }
               }
           })

       </script>
       <style type="text/css">
           /*实现用户数据列表展示5分，实现列表选中行变色5分，实现表格内行与行之间颜色区分5分，实现鼠标移动到删除上时变为小手样式5分*/
           tr:nth-child(odd){
               background-color: #EEEEEE;
           }
           tr:hover{
               background-color: yellow;
           }
       </style>
   </head>
   <body ng-app="jun" ng-controller="dd">
       姓名查询条件
       <input ng-model="namefilter"/>
       
       <select ng-model="agefilter">
           <option>请选择</option>
           <option value="age">按年龄正序</option>
           <option value="-age">按年龄倒序</option>
       </select>
       <br />
       <br />
       用户列表
       <table border="1px" cellspacing="1px" cellpadding="1px">
           <tr>
               <th>
                   姓名
               </th>
               <th>
                   年龄
               </th>
               <th>
                   拼音
               </th>
               <th>
                   职位
               </th>
               <th>
                   操作
               </th>
           </tr>
           <tr ng-repeat="p in people |orderBy:agefilter|filter:{name:xun}" >
               <td>
                   {{p.name}}
               </td>
               <td>
                   {{p.age}}
               </td>
               <td>
                   {{p.pinyin}}
               </td>
               <td>
                   {{p.work}}
               </td>
               <td>
                   <a href="" ng-click="del($index)">删除</a>
               </td>
           </tr>
       </table>
       <button ng-click="sel()">查询</button>
       <button ng-click="add()">添加用户</button>
       <form id="people">
           <fieldset>
               <legend>
                   添加用户信息
               </legend>
               姓名
               <input ng-model="name"/>
               <br />
               <br />
               年龄
               <input ng-model="age"/>
               <br />
               <br />
               拼音
               <input ng-model="pinyin"/>
               <br />
               <br />
               职位
               <input ng-model="work"/>
               <br />
               <br />
               <button ng-click="bc()">保存</button>
           </fieldset>
       </form>
   </body>
</html>

阅读全文

0 0