用户信息：奇偶数隔行变色，选中行变色，鼠标变小手样式；姓名查询条件，过滤敏感字符；下拉列表排序；非空验证添加信息；点击按钮删除
需求：
使用AngularJS，html，css，js等技术实现下图功能：
1.用户列表页
2.用户信息添加页
3.删除询问框
评分标准：
1.实现用户数据列表展示，实现列表选中行变色，实现表格内行与行之间颜色区分，实现鼠标移动到删除上时变为小手样式。
2.实现姓名查询条件框，实现查询条件框内的内容为空点击查询按钮时alert提示”请输入姓名”，实现按姓名搜索表格内容功能，当搜索内容未找到匹配项时提示”未找到内容”，当搜索内容有敏感词时，alert提示。
3.实现排序下拉列表展示，实现按照年龄倒序排序，实现按照年龄正序排序。
4.实现用户添加页，按要求实现内容添加，实现添加内容时的校验，当年龄不为数字时alert提示用户”年龄格式错误”功能，实现添加用户信息到列表中。
5.实现列表页面布局整洁，实现添加页面布局整洁
6. 实现点击删除时弹出二次确认询问框，实现删除功能，删除后从列表中消失。注：询问框可使用js的confirm实现
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户信息：奇偶数隔行变色，选中行变色，鼠标变小手样式；姓名查询条件，过滤敏感字符；下拉列表排序；非空验证添加信息；点击按钮删除</title>
<script src="../js/jquery-2.1.0.js"></script>
<script src="../js/angular.js"></script>
<style type="text/css">
.first{
background-color: darkgrey;
}
.tr_odd{
background-color: orange;
}
.tr_even{
background-color: aqua;
}
.mouse_color{
background-color: green;
}
#tab{
border: 1px #FF0000 solid;
text-align: center;
}
tbody tr:nth-child(odd) {
background-color: orange;
}
tbody tr:nth-child(even){
background-color: aqua;
}
</style>
<script type="text/javascript">
$(function(){
//实现表格内行与行之间颜色区分
$("thead tr").addClass("first");
//设置奇数行背景色
$("#tab tr:odd").find("td").addClass("tr_odd");
//设置偶数行背景色
$("#tab tr:even").find("td").addClass("tr_even");
//鼠标移到行的颜色
$("#tab tr").mouseover(function(){
$(this).find("td").addClass("mouse_color");
});
//鼠标移出行的颜色
$("#tab tr").mouseout(function(){
$(this).find("td").removeClass("mouse_color");
});
});
</script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function ($scope) {
$scope.users = [
{name:"张三",age:20,pin:"zhang san",zhi:"总经理"},
{name:"李四",age:18,pin:"li si",zhi:"设计师"},
{name:"王五",age:45,pin:"wang wu",zhi:"工程师"},
{name:"赵六",age:33,pin:"zhao liu",zhi:"工程师"},
{name:"周七",age:32,pin:"zhou qi",zhi:"人事经理"}
];
/* 1. 实现姓名查询条件框5分，实现查询条件框内的内容为空点击查询按钮时alert提示”请输入姓名”5分；
实现按姓名搜索表格内容功能5分，当搜索内容未找到匹配项时提示”未找到内容”5分，当搜索内容有敏感词时，alert提示 */
//过滤敏感字符：枪 法轮功
$scope.select = function () {
$(function () {
var searchName = $("input:eq(0)").val();
//实现查询条件框内的内容为空点击查询按钮时alert提示”请输入姓名”
if(searchName == "" || searchName == null){
alert("请输入姓名");
}else {
//当搜索内容有敏感词时，alert提示
if(searchName == "枪" || searchName == "法轮功"){
alert("输入内容含有敏感字符！");
$scope.searchName = "";
}else {
//实现按姓名搜索表格内容功能5分，当搜索内容未找到匹配项时提示”未找到内容”
var flag = false;
for(index in $scope.users){
if(searchName == $scope.users[index].name){
flag = true;
}
}
if(flag){
alert("已找到内容");
}else {
alert("未找到内容！");
}
}
}
});
}
//2.实现排序下拉列表展示5分，实现按照年龄倒序排序5分，实现按照年龄正序排序
$scope.order = "age";
//3. 实现用户添加页，按要求实现内容添加5分，实现添加内容时的校验，当年龄不为数字时alert提示用户”年龄格式错误”功能5分，实现添加用户信息到列表中
$scope.show = false;
$scope.add = function () {
$scope.show = true;
}
$scope.name = "";
$scope.age = "";
$scope.pin = "";
$scope.zhi = "";
//点击添加用户信息的按钮,验证非空情况后，再添加
$scope.sub = function () {
$scope.flag1 = false;
$scope.flag2 = false;
$scope.flag3 = false;
$scope.flag4 = false;
//姓名非空
if ($scope.name == null || $scope.name == ""){
alert("姓名不得为空！");
}else {
$scope.flag1 = true;
}
//当年龄不为数字时alert提示用户”年龄格式错误”功能
if ($scope.age == "" || $scope.age == null){
alert("年龄不能为空！");
}else if (isNaN($scope.age)){
alert("年龄格式错误！");
}else {
$scope.flag2 = true;
}
//姓名拼音
if ($scope.pin == null || $scope.pin == ""){
alert("姓名拼音不得为空！");
}else {
$scope.flag3 = true;
}
//职位判断
if ($scope.zhi == "" || $scope.zhi == null){
alert("职位不能为空！");
}else if (isNaN($scope.zhi) == false){
alert("职位不能为数字！");
}else {
$scope.flag4 = true;
}
//符合条件后再提交添加
if($scope.flag1 == true && $scope.flag2 == true && $scope.flag3 == true && $scope.flag4 == true){
//添加成功后清空信息
var inputs = document.getElementsByTagName("input");
for(i=0;i<inputs.length;i++){
inputs.item(i).value = "";
}
//设置新数据
var newUser = {
name:$scope.name,
age:$scope.age,
pin:$scope.pin,
zhi:$scope.zhi
}
//添加新用户
$scope.users.push(newUser);
$scope.show = false;
}else {
return false;
}
}
//4. 实现点击删除时弹出二次确认询问框5分，实现删除功能，删除后从列表中消失5分。注：询问框可使用js的confirm实现
$scope.remove = function (selectName) {
if (confirm("您是否要将该用户从列表中删除？")) {
//根据列名删除数据，首先根据所在下标遍历所有内容
for (index in $scope.users) {
if($scope.users[index].name == selectName){
//使用js中的删除方法，每次删除的项目数量为1行
$scope.users.splice(index,1);
}
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<div>
<h5>用户列表</h5>
姓名查询条件<input id="searchText" >
<select ng-model="order">
<option value="-age">按年龄倒序</option>
<option value="age">按年龄正序</option>
</select>
</div> <br>
<table id="tab" cellspacing="0" cellpadding="20" border="1 solid black">
<thead align="left">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>拼音</th>
<th>职位</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | orderBy:order">
<td pinyin="name" >{{user.name}}</td>
<td pinyin="age" >{{user.age}}</td>
<td pinyin="pin" >{{user.pin}}</td>
<td pinyin="zhi" >{{user.zhi}}</td>
<!-- 实现鼠标移动到删除上时变为小手样式-->
<td><a ng-click="remove(user.name)"><div style="cursor:pointer;">删除</div></a></td>
</tr>
</tbody>
</table> <br>
<div>
<button ng-click="select()">查询</button>
<button ng-click="add()">添加用户</button>
</div>
<!-- 添加用户信息区域 -->
<div ng-show="show">
<h5>添加用户信息</h5>
<table cellspacing="0" cellpadding="12" border="1 solid black">
<tr>
<th>姓名</th>
<td><input type="text" ng-model="name" placeholder="请输入姓名"></td>
</tr>
<tr>
<th>年龄</th>
<td><input type="text" ng-model="age" placeholder="请输入年龄"></td>
</tr>
<tr>
<th>拼音</th>
<td><input type="text" ng-model="pin" placeholder="请输入拼音"></td>
</tr>
<tr>
<th>职位</th>
<td><input type="text" ng-model="zhi" placeholder="请输入职位"></td>
</tr>
<tr align="center">
<td colspan="2"><button ng-click="sub()" >保存</button></td>
</tr>
</table>
</div>
</center>
</body>
</html>