html中一些方法

最新推荐文章于 2022-03-28 13:42:23 发布

wuhaowu

最新推荐文章于 2022-03-28 13:42:23 发布

阅读量209

点赞数

本文链接：https://blog.csdn.net/qq_40072304/article/details/78611043

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>吴昊日考</title>
       <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
       <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>

   </head>

   <body ng-app="myApp" ng-controller="myCtrl">
       姓名查询条件：<input type="text" id="name" />
       <select id="paixu" ng-options="x for x in orders" ng-model="selected" ng-init="selected=orders[0]" ng-change="change()"></select>
       <br />用户列表:
       <br />
       <table border="1px" cellspacing="0px" cellpadding="0px" class="table-striped table-hover">
           <tr>
               <th>批量操作<input type="checkbox" ng-click="quanxuan()"/></th>
               <th>姓名</th>
               <th>年龄</th>
               <th>拼音</th>
               <th>职位</th>
               <th>操作</th>
           </tr>
           <tr ng-repeat="person in persons">
               <td style="text-align: center; width: 80px;"><input type="checkbox" id="checks"/></td>
               <td>{{person.name}}</td>
               <td>{{person.age}}</td>
               <td>{{person.pinyin}}</td>
               <td>{{person.zhiwei}}</td>
               <td><a href="#" ng-click="dele($index)">删除</a></td>
           </tr>

       </table>
       <input type="button" id="cha" value="查询" ng-click="cha()" />
       <input type="button" id="add" value="添加用户" ng-click="show()" />
       <button style="height: 25px; width: 80px; margin-left: 10px; " ng-click="delAll()">批量删除</button>
       <form id="f">
           <fieldset id="">
               <legend>添加用户信息</legend>
               姓名:<input type="text" name="name1" id="name1" /><br> 年龄:
               <input type="text" name="age" id="age" /><br> 拼音:
               <input type="text" name="pinyin" id="pinyin" /><br> 职位:
               <input type="text" name="zhiwei" id="zhiwei" /><br>
               <input type="button" value="保存" ng-click="save()" />
           </fieldset>



           <input type="submit" value=""/>
       </form>

       
       <script type="text/javascript">
           //默认下面添加页面隐藏
           $("#f").hide();
           var mo = angular.module("myApp",[]);
           mo.controller("myCtrl",function($scope){
               //初始化添加数据
               $scope.persons = [{
                   "name":"张三",
                   "age":20,
                   "pinyin":"zhangsan",
                   "zhiwei":"总经理"
               },{
                   "name": "李四",
                   "age": 25,
                   "pinyin": "lisi",
                   "zhiwei": "副经理"
               },{
                   "name": "王五",
                   "age": 22,
                   "pinyin": "wangwu",
                   "zhiwei": "工程师"
               }];
               //查询
               $scope.cha = function() {

                       //取值
                       var name = $("#name").val();
                       //                   alert(name)
                       //判断
                       if (name == "") {
                           alert("请输入姓名");
                           return;
                       }
                       //敏感词
                       if (name.indexOf("奥") != -1) {
                           alert("有敏感词");
                           return;
                       }
                       var newPersons = [];
                       //是否含有
                       for (var i = 0; i < $scope.persons.length; i++) {
                           var p = $scope.persons[i];
                           if (p.name == name) {
                               newPersons.push(p);
                           }
                       }
                       //之后判断新的数组是否是为空
                       if (newPersons.length == 0) {
                           alert("没有匹配项");
                           return;
                       }
                       $scope.persons = newPersons;
                   }
               //初始化下拉
               $scope.orders = ["按年龄正序排列","按年龄倒叙排列"];
               //给change事件
               $scope.change = function(){
                   var pai = $("#paixu").val();
                   alert("dd"+pai)
                   if(pai=="string:按年龄正序排列"){
                       $scope.persons.sort(function(a,b){
                           if (a.age > b.age) {
                                   return 1;
                               } else if (a.age < b.age) {
                                   return -1;
                               }
                               return 0;
                       });

                   }else{
                       $scope.persons.sort(function(a,b){
                           if (a.age > b.age) {
                                   return -1;
                               } else if (a.age < b.age) {
                                   return 1;
                               }
                               return 0;
                       });

                   }

               }
               //显示的动画
               $scope.show = function(){
                   $("#f").show(1000);
               }
               //验证年龄
               $scope.save = function(){
                   //添加
                   var name12 = $("#name1").val();
                   var age = $("#age").val();
                   var pinyin = $("#pinyin").val();
                   var zhiwei = $("#zhiwei").val();
                   var pe={
                       "name":name12,
                       "age":age,
                       "pinyin":pinyin,
                       "zhiwei":zhiwei
                   };
                   $scope.persons.push(pe);
                   //消失
                   $("#f").hide();
               }
               //删除
               $scope.dele = function($index){
                   var c = confirm("是否确认删除");
                   if(c==true){
                       $scope.persons.splice($index,1);

                   }

               }
               //全选
               $scope.quanxuan = function(){
                   var dx = $("input[id='checks']");
                   for(var i = 0;i<dx.length;i++){
                       var isno = dx[i].checked;
                       if(isno){

                           dx[i].checked = false;
                       }else{
                           dx[i].checked = true;
                       }


                   }


               }
               //批量删除
               $scope.delAll = function(){
                   $scope.szz = [];

                   $scope.trs = [];
                   var dx = $("input[id='checks']");
                   for(var i = 0;i<dx.length;i++){
                       var isno = dx[i].checked;
                       if(isno){
                           var cb = dx[i];
                           var tr = cb.parentNode.parentNode;
                           var index = $(tr).index();
                           $scope.trs.push(tr);
                           $scope.szz.push(index);

                       }

                   }
                   console.log($scope.szz);
                   if($scope.szz.length>0){
                       var xzz = confirm("确认删除吗？");
                       if(xzz){
                           for(var j = 0;j<$scope.trs.length;j++){
                               var a = $scope.trs[j];
                               a.remove();
                           }
                           setTimeout("alert('删除成功')",200)

                       }

                   }else{
                       alert("请先选中后再进行批量删除")
                   }

               }

           })


       </script>


   </body>
</html>