月考

来源：互联网发布：二手备案域名编辑：程序博客网时间：2024/05/16 23:45
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">#a {width: 800px;text-align: center;border-collapse: collapse;margin-top: 20px;}#b {border-collapse: collapse;margin-top: 20px;text-align: center;}#a tr:nth-child(odd) {background-color: #6699CC;}#a tr:nth-child(even) {background-color: ;}#d {width: 200px;height: 200px;}</style><script src="js/jquery-2.1.0.js"></script><script src="js/angular.min.js"></script><script type="text/javascript">angular.module("jml", []).controller("democ", function($scope) {$scope.datas = [{id: 1,name: "张三",age: 21,six: "男",iphone: 18611111111,aihao: "只爱学习"}, {id: 2,name: "李四",age: 20,six: "男",iphone: 18622222222,aihao: "独自学习"},{id: 3,name: "小花",age: 19,six: "女",iphone: 18633333333,aihao: "听着歌学习"},{id: 4,name: "翠花",age: 18,six: "女",iphone: 18644444444,aihao: "看书学习"},{id: 5,name: "小凤",age: 18,six: "女",iphone: 18655555555,aihao: "去图书馆学习"}];//添加隐藏显示$scope.isShow = false;$scope.btt = function() {if($scope.isShow) {$scope.isShow = false;} else {$scope.isShow = true;}}//修改隐藏显示$scope.yc = false;$scope.bttt = function(aa) {if($scope.yc) {$scope.yc = false;} else {$scope.yc = true;}$scope.aaa = $scope.datas[aa];}//删除$scope.del = function(a) {if(window.confirm("确定删除？")) {$scope.datas.splice(a, 1);alert("删除成功");}}//添加$scope.tianjia = function() {$scope.list = [];var t1 = false;var t2 = false;var t3 = false;var t4 = false;var t5 = false;var t6 = false;var id = $scope.id;var name = $scope.name;var age = $scope.age;var six = $scope.six;var iphone = $scope.iphone;var aihao = $scope.aihao;//判断非空if(id == null || id == "") {$scope.list.push("id不能为空");} else {t1 = true;}if(name == null || name == "") {$scope.list.push("姓名不能为空");} else {t2 = true;}if(age == null || age == "") {$scope.list.push("年龄不能为空");} else {t3 = true;}if(six == null || six == "") {$scope.list.push("性别不能为空");} else {t4 = true;}if(iphone == null || iphone == "") {$scope.list.push("电话不能为空");} else {t5 = true;}if(aihao == null || aihao == "") {$scope.list.push("爱好不能为空");} else {t6 = true;}if(t1 && t2 && t3 && t4 && t5 && t6) {$scope.datas.push({id: id,name: name,age: age,six: six,iphone: iphone,aihao: aihao})$scope.isShow = false;} else {alert("添加失败");}}//修改$scope.xiu = function() {$scope.yc = false;}//姓名查询$scope.chaxun = function() {if($scope.sousuo == null || $scope.sousuo == "") {alert("搜索框不能为空");return;}$scope.selname = $scope.sousuo;}})</script></head><body ng-app="jml" ng-controller="democ"><center>年龄排序<select ng-model="nianling"><option value="">请选择</option><option value="-age">年龄正序排列</option><option value="+age">年龄倒叙排列</option></select>id排序<select ng-model="idd"><option value="">请选择</option><option value="+id">ID正序排列</option><option value="-id">ID倒叙排列</option></select>姓名<input type="text" ng-model="sousuo" style="margin-left: 95px;" /><button ng-click="chaxun()">按姓名查询</button><button ng-click="btt()">添加新用户</button><table border="1" id="a"><tr><td style="background:#CCCCCC;">id</td><td style="background:#CCCCCC;">姓名</td><td style="background:#CCCCCC;">年龄</td><td style="background:#CCCCCC;">性别</td><td style="background:#CCCCCC;">联系方式</td><td style="background:#CCCCCC;">爱好</td><td style="background:#CCCCCC;">操作</td></tr><tr ng-repeat="d in datas|filter:{name:selname}|orderBy:nianling|orderBy:idd"><td>{{d.id}}</td><td>{{d.name}}</td><td>{{d.age}}</td><td>{{d.six}}</td><td>{{d.iphone}}</td><td>{{d.aihao}}</td><td><input type="button" value="修改" ng-click="bttt($index)" /><input type="button" value="删除" ng-click="del($index)" /></td></tr></table><!--添加的框--><form action="" method="post" ng-show="isShow"><table border="0" id="b"><tr><td>id</td><td><input type="text" ng-model="id" /></td></tr><tr><td>姓名</td><td><input type="text" ng-model="name" /></td></tr><tr><td>年龄</td><td><input type="text" ng-model="age" /></td></tr><tr><td>性别</td><td><select ng-model="six" style="width: 174px;"><option value="">请选择</option><option value="男">男</option><option value="女">女</option></select></td></tr><tr><td>联系方式</td><td><input type="text" ng-model="iphone" /></td></tr><tr><td>爱好</td><td><input type="text" ng-model="aihao" style="width: 170px;height: 100px;" /></td></tr><tr><td colspan="2"><input type="button" value="添加" ng-click="tianjia()" /><input type="reset" value="清空" /></td></tr></table></form><!--提示的框--><ul id="d" ng-show="isShow"><li ng-repeat="l in list">{{l}}</li></ul><!--修改的框--><form action="" method="post" ng-show="yc"><table border="0" id="b"><tr><td>id</td><td><input type="text" ng-model="aaa.id" /></td></tr><tr><td>姓名</td><td><input type="text" ng-model="aaa.name" /></td></tr><tr><td>年龄</td><td><input type="text" ng-model="aaa.age" /></td></tr><tr><td>性别</td><td><select style="width: 174px;" ng-model="aaa.six"><option value="">请选择</option><option value="男">男</option><option value="女">女</option></select></td></tr><tr><td>联系方式</td><td><input type="text" ng-model="aaa.iphone" /></td></tr><tr><td>爱好</td><td><input type="text" ng-model="aaa.aihao" style="width: 170px;height: 100px;" /></td></tr><tr><td colspan="2"><input type="button" value="修改" ng-click="xiu()" /><input type="reset" value="清空" /></td></tr></table></form></center></body></html>
阅读全文
0 0