判断弹框

最新推荐文章于 2024-04-13 08:45:00 发布
Ason_haiyu
最新推荐文章于 2024-04-13 08:45:00 发布
阅读量410
点赞数
本文链接：https://blog.csdn.net/Ason_haiyu/article/details/79074285
版权
<html> 
    
  <head> 
  <meta  charset="utf-8" /> 
  <title>月考</title> 
  <!-- 
  导入外部js、css 
  --> 
  <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" /> 
  <style  type="text/css"> 
  fieldset { 
  padding: .35em .625em .75em; 
  margin: 0 2px; 
  border: 1px solid silver 
  } 
    
  legend { 
  padding: .5em; 
  border: 0; 
  width: auto 
  } 
  </style> 
  </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  style="background: #999999;"> 
  <td><input type="checkbox" id="quan" ng-click="quan()" /></td> 
  <td>姓名</td> 
  <td>年龄</td> 
  <td>拼音</td> 
  <td>职位</td> 
  <td>操作</td> 
  </tr> 
  <tr  ng-repeat="person in persons"> 
  <td><input type="checkbox" class="myCb" /></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="piliang"  value="批量删除"  ng-click="deleAll()" /> 
  <input  type="button"  id="cha"  value="查询"  ng-click="cha()" /> 
  <input  type="button"  id="add"  value="添加用户"  ng-click="show()" /> 
  <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> 
    
  </form> 
  <!-- 
  逻辑代码 
  --> 
  <script  type="text/javascript"> 
  //默认下面添加页面隐藏 
  $("#f").hide(); 
    
  var m = angular.module("myApp", []); 
  m.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); 
  } 
  //save 
  $scope.save = function() { 
  //验证年龄 
  var age = $("#age").val(); 
  var b = isNaN(age); 
  if (b == true) { //如果不是一个数字就是 true 
  alert("年龄格式不正确") 
  return 
  } 
  //添加 
  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.deleAll = function() { 
  var b = confirm("是否确认删除？"); 
    
  if (b == true) { 
  //获取选中的复选框 
  var cbs = $("input[type=checkbox][class=myCb]:checked"); 
  //遍历，删除复选框所在行 
  for (var i = 0; i < cbs.length; i++) { 
  //取出每个复选框 
  var cb = cbs[i]; 
  //删除所在行 
  var tr = cb.parentNode.parentNode; 
  tr.remove(); 
  } 
  } 
    
  } 
  var flag = false; 
  $scope.quan = function() { 
    
  var cbs = $("input[type=checkbox]"); 
  if (flag == false) { 
  for (var i = 0; i < cbs.length; i++) { 
  var cb = cbs[i]; 
  cb.checked = true; 
  } 
  flag = true; 
  } else { 
  for (var i = 0; i < cbs.length; i++) { 
  var cb = cbs[i]; 
  cb.checked = false; 
  } 
  flag = false; 
  } 
    
  } 
  }) 
  </script> 
  </body> 
    
  </html>