二级练习综合题+表格隔行换色

最新推荐文章于 2023-03-09 13:34:09 发布

yin_chenglong

最新推荐文章于 2023-03-09 13:34:09 发布

阅读量244

点赞数

本文链接：https://blog.csdn.net/yin_chenglong/article/details/80102950

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
//模拟数据
$scope.stu=[{
name:"张三",
sex:"男",
birth: new Date("1998-10-06" ),
zhuzhi:"北京西二旗"
},{
name:"李四",
sex:"女",
birth: new Date("1997-11-26" ),
zhuzhi:"北京西二旗"
},{
name:"王五",
sex:"男",
birth: new Date("1999-05-06" ),
zhuzhi:"北京西二旗"
}];
//定义城市
$scope.pros = [{pro:"北京",childer:["西二旗","上地"]},
{pro:"河北",childer:["邯郸","石家庄","保定"]}];
$scope.citys = $scope.pros[0].childer;
$scope.changeCity = function(s1){
$scope.citys = $scope.s1.childer;
}
//添加
$scope.addPro = function(){
var stus = {};
//信息校验
if($scope.name==null||$scope.name==""){//姓名校验不为空
$scope.showName = true;
return;
}else{
stus.name = $scope.name;
$scope.showName = false;
}
if($scope.sex == null){//性别校验
$scope.showSex = true;
return;
}else{
stus.sex = $scope.sex;
$scope.showSex = false;
}
if ($scope.birth == null) {//生日校验
$scope.showBirth = true;
return;
} else{
stus.birth = $scope.birth;
$scope.showBirth = false;
}
stus.zhuzhi = $scope.s1.pro+$scope.s2;
$scope.stu.push(stus);
//添加隐藏
$scope.showAdd = false;
}
//删除
$scope.deleteStu = function(sname){
for (var i = 0; i < $scope.stu.length; i++) {
if ($scope.stu[i].name == sname) {
$scope.stu.splice(i,1)
}
}
}
//点击标题的复选框，实现全选功能
$scope.All = function(){
for (var i = 0; i < $scope.stu.length; i++) {
$scope.stu[i].ck = $scope.check;
}
}
//全选反选
$scope.xuan = function(){
for (var i = 0; i < $scope.stu.length; i++) {
$scope.stu[i].ck = !$scope.stu[i].ck;
}
}
//批量删除
$scope.deleteMore = function(){
for (var i = 0; i < $scope.stu.length; i++) {
if($scope.stu[i].ck){
$scope.stu.splice(i,1);
i--;
}
}
}
//修改
var upStu = "";
//点击修改按钮判断
$scope.showUpdate = function(sname){
for (var i = 0; i < $scope.stu.length; i++) {
if($scope.stu[i].name == sname){
$scope.updateShow = true;//显示要修改信息
upStu = $scope.stu[i];
break;
}
}
//回显
$scope.upname = upStu.name;
$scope.upsex = upStu.sex;
$scope.upbirth = upStu.birth;
$scope.upzhuzhi = upStu.zhuzhi;
}
//修改之后，修改信息消失
$scope.tjUpdate = function(){
upStu.name = $scope.upname;
upStu.sex = $scope.upsex;
upStu.birth = $scope.upbirth;
upStu.zhuzhi = $scope.upzhuzhi;
$scope.updateShow = false;
}
});
</script>
<style type="text/css">
span{
color: red;
}
table{
text-align: center;
border-collapse: collapse;

}table{
width: 450px;
height: 40px;
border-collapse: collapse;
}
table tr:nth-child(even){
background-color: #CC9966;
}
table tr:nth-child(odd){
background-color: #993366;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
查询：<input type="text" placeholder="请输入查询关键字" ng-model="sera" />
排序：<select ng-model="orderKey">
<option value="">--请选择--</option>
<option value="birth">生日正序</option>
<option value="-birth">生日倒序</option>
</select>
<input type="button" value="添加" ng-click="showAdd =!showAdd" /><br />
<br />
<div ng-show="showAdd">
姓名：<input type="text" placeholder="请输入姓名" ng-model="name" /><span ng-show="showName">姓名不能为空</span><br />
性别：<select ng-model="sex">
<option value="">--请选择--</option>
<option value="男">男</option>
<option value="女">女</option>
</select><span ng-show="showSex">请选择性别</span><br />
生日：<input type="date" ng-model="birth" /><span ng-show="showBirth">请输入生日</span><br />
住址：<select ng-init="s1 = pros[0]" ng-model="s1" ng-options="p.pro for p in pros" ng-change="changeCity(s1)">
<option value="">--请选择省份--</option>
</select>
市：<select ng-init="s2 = citys[0]" ng-model="s2" ng-options="c for c in citys">
<option value="">--请选择城市--</option>
</select><br />
<input type="button" value="提交添加" ng-click="addPro()" />
</div>
<br />
<table border="1px" bordercolor="green" cellpadding="5px">
<tr style="background-color: gray;">
<th><input type="checkbox" ng-model="check" ng-click="All()"/></th>
<th>姓名</th>
<th>性别</th>
<th>生日</th>
<th>住址</th>
<th>操作</th>
</tr>
<tr ng-repeat="s in stu| filter:sera |orderBy:orderKey">
<td><input type="checkbox" ng-model="s.ck"/></td>
<td>{{s.name}}</td>
<td>{{s.sex}}</td>
<td>{{s.birth | date:'yyyy-MM-dd'}}</td>
<td>{{s.zhuzhi}}</td>
<td>
<input type="button" value="删除" ng-click="deleteStu(s.name)" />
<input type="button" value="修改" ng-click="showUpdate(s.name)" />
</td>
</tr>
</table><br /><br />
<input type="button" value="批量删除" ng-click="deleteMore()" style="background-color: green;"/>
<input type="button" value="全选反选" ng-click="xuan()" style="background-color: yellow;"/>
<br /><br />
<div ng-show="updateShow">
姓名：<input type="text" ng-model="upname" /><br />
性别：<select ng-model="upsex">
<option value="">--请选择--</option>
<option value="男">男</option>
<option value="女">女</option>
</select><br />
生日：<input type="date" ng-model="upbirth" /><br />
住址：<input type="text" ng-model="upzhuzhi" /><br />
<input type="button" value="提交修改" ng-click="tjUpdate()" />
</div>
<br />
</center>
</body>
</html>