添加表单隐藏变小手鼠标滑过变色

<!DOCT.YPE html>
<html>
<head>
<meta charset="utf-8" />
<title>月考练习</title>
<script type="text/javascript" src="js/angular.js" ></script>
<style type="text/css">
tbody tr:nth-child(even)
{
background: #666;
}
tbody tr:nth-child(odd)
{
background: greenyellow;

}

//鼠标滑过变色

table tr:hover{
background-color: red;
}

</style>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.shops=[{
name:"张三",
age:45,
py:"zhangsan",
zw:"总经理"
}
,{
name:"小红",
age:15,
py:"zhangsan",
zw:"程序员"
},{
name:"小三",
age:25,
py:"zhangsan",
zw:"设计师"
},{
name:"小逼三",
age:495,
py:"zhangsan",
zw:"人事经理"
}
];
//查询弹框，另一种表达
$scope.cx="";
$scope.cxb=function(){
var flag = false;
for(shop in $scope.shops){
if($scope.cx==$scope.shops[shop].name){
flag=true;
}
}
if($scope.cx==null || $scope.cx==""){
alert("输入框为空");
}else if($scope.cxb=="强" || $scope.cxb=="好"){
alert("有敏感词");
}else if(flag){
alert("有该内容");

}else{
alert("没有该内容");

}

}

//添加
$scope.show=false;
$scope.add=function(){
$scope.show=true;
}

$scope.newname="";
$scope.newage="";
$scope.newpy="";
$scope.newzw="";
//点击添加用户信息的按钮,验证非空情况后，再添加
$scope.sub=function(){
$scope.flag1=false;
$scope.flag2=false;
$scope.flag3=false;
$scope.flag4=false;

//姓名非空
if ($scope.newname==null || $scope.newname=="")
{
alert("姓名不能为空");
} else
{
$scope.flag1=true;
}
//年龄
if ($scope.newage==null || $scope.newage=="")
{
alert("年龄不能为空");
} else if(isNaN($scope.newage))
{
alert("年龄格式错误！");
}else
{
$scope.flag2=true;
}
//拼音
if ($scope.newpy==null || $scope.newpy=="")
{
alert("拼音不能为空");
}
{
$scope.flag3=true;
}
//职位判断
if ($scope.newzw==null || $scope.newzw=="")
{
alert("职位不能为数字");
}
{
$scope.flag4=true;
}

//符合条件后再提交添加
if ($scope.flag1==true && $scope.flag2==true && $scope.flag3==true && $scope.flag4==true)
{
//添加成功后清空信息
var inputs=document.getElementsByName("input");
for (i=0;i<inputs.length;i++)
{
inputs.item(i).value="";
}
//设置新数据
var newUser={
name:$scope.newname,
age:parseInt($scope.newage),
py:$scope.newpy,
zw:$scope.newzw
}
//添加新用户
$scope.shops.push(newUser);
$scope.show=false;
} else
{
return false;
}

}

//删除
$scope.dele=function(selectname){
if(confirm("您是否将该用户从列表中删除？")){
for(index in $scope.shops){
if($scope.shops[index].name==selectname){
$scope.shops.splice(index,1);
}
}
}
}
//点击列明进行排序
//| orderBy:flag+column 表头进行排序
// $scope.flag = "";
// $scope.column = "age";
// $scope.orderColumn = function(column){
// //alert(column);
// $scope.column = column;
// if($scope.flag == ""){
// $scope.flag = "-";
// }else{
// $scope.flag = "";
// }
// }

});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
姓名查询条件<input type="text" ng-model="cx"/>
<select ng-model="sel">
<option value="">**选择排序**</option>
<option value="age">年龄正序</option>
<option value="-age">年龄倒序</option>
</select><br>
<h3>用户列表</h3><br>
<table border="1px" cellpadding="10" cellspacing="0">
<thead>
<tr style="background: darkgrey">
<th>姓名</th>
<th>年龄 <input type="button" ng-click="orderColumn('age')" value="排序" />
</th>
<th>拼音</th>
<th>职位</th>
<th>艹作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="shop in shops |orderBy:sel |filter:{name:cx} ">
<td>{{shop.name}}</td>
<td>{{shop.age}}</td>
<td>{{shop.py}}</td>
<td>{{shop.zw}}</td>
<td>
<button ng-click="dele(shop.name)" style="cursor:pointer ;">删除</button>
</td>
</tr>
</tbody>
</table>
<button ng-click="cxb()">查询</button>
<button ng-click="add()">添加</button>
<br><br>
<div ng-show="show">
<h3>添加用户</h3>
姓名：<input type="text" ng-model="newname"/><br>
年龄：<input type="text" ng-model="newage"/><br>
拼音：<input type="text" ng-model="newpy"/><br>
职位：<input type="text" ng-model="newzw"/><br>
<button ng-click="sub()">保存</button>
</div>
</body>
</html>

添加 表单隐藏 变小手 鼠标滑过变色

猜你喜欢

添加表单隐藏变小手鼠标滑过变色