使用者資訊：奇偶數隔行變色，選中行變色，滑鼠變小手樣式；姓名查詢條件，過濾敏感字元；下拉選單排序；非空驗證新增資訊；點選按鈕刪除
需求：
使用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>
相關文章
- 改變UITableView選中行高亮的顏色UIView
- Jquery實現頁面的新增、刪除、全選、取消全選、漸變色jQuery
- 滑鼠懸浮背景變色導航選單
- 選中按鈕改變文字大小和顏色
- 快速搭建直播平臺，點選按鈕(Button)後改變顏色
- 商品訂單（增刪改查）：新增訂單；批量刪除，發貨；模糊查詢，下拉選單內容過濾（含時間）；全選反選，列名排序排序
- JavaScript單擊變色再次點選還原JavaScript
- 點選一個按鈕使其樣式發生變化，再點選另一個按鈕發生同樣變化，但上一個按鈕樣式復原
- 移動端模擬hover：按鈕點選變色之後還原
- Android開發 如何使用選擇器（selector） 來實現點選按鈕變色Android
- jQuery連結點選變色 點選其他還原jQuery
- js實現的表格隔行變色和滑鼠懸浮變色程式碼JS
- 選中和取消選中核取方塊實現背景變色和取消變色
- CSS 表格隔行變色CSS
- jQuery表格隔行變色jQuery
- JavaScript隔行變色效果JavaScript
- JavaScript 點選表格行實現背景變色JavaScript
- html點選<a>元素後顏色的變換HTML
- echarts 柱狀圖的選中模式實現-被選中變色和再次選中為取消變色Echarts模式
- 利用jquery子屬性過濾器實現隔行變色jQuery過濾器
- JavaScript點選按鈕切換背景顏色JavaScript
- CSS 改變文字選中顏色CSS
- excel 中，選中的行，變色Excel
- 直播軟體搭建，漸變色按鈕帶陰影樣式
- JavaScript 表格隔行變色效果JavaScript
- JavaScript點選按鈕刪除div元素JavaScript
- jQuery點選按鈕刪除div元素jQuery
- Vue 導航 點選當前標題變色Vue
- 滑鼠懸浮按鈕背景變色效果程式碼例項
- 如何使用 Bootstrap class 向按鈕新增下拉選單boot
- Bootstrap3系列：按鈕式下拉選單boot
- 頁面表格怎麼實現隔行異色、隔行變色
- 點選當前文字行實現文字變色效果
- jQuery外掛--表格隔行變色jQuery
- CSS表格隔行變色詳解CSS
- js點選當前td單元格背景變色效果詳解JS
- GAT新Bug：點選分頁按鈕頁面沒變
- javascript動態改變單選按鈕radio的選中狀態JavaScript