angular jQuery css html混合table表格查询 排序 添加 删除 隔行换色
2017-12-08 18:53
911 查看
//第一步还是要导包
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="js/angular.min.js" ></script>
//head的布局和控制
<style type="text/css">
.xs{
cursor: pointer;
}
.first{
background-color:darkgrey;
}
tbody tr:nth-child(odd){
background-color:lightgrey;
}
tbody tr:nth-child(even){
background-color:azure;
}
table tr:hover{background-color:darkturquoise;
</style>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$(function () {
/* 表格第一行变 天蓝 色 */
$("thead tr").addClass("first");
});
$(function(){
$("button").addClass("xs");
})
//先在表格里添加一些数据
$scope.position = [{
name:"张三",
age:45,
pinyin:"zhang san",
zhiwei:"总经理"
},{
name:"李四",
age:43,
pinyin:"li si",
zhiwei:"设计师"
},{
name:"王五",
age:40,
pinyin:"wang wu",
zhiwei:"工程师"
},{
name:"赵六",
age:33,
pinyin:"zhao liu",
zhiwei:"工程师"
},{
name:"周七",
age:32,
pinyin:"zhou qi",
zhiwei:"人事经理"
}];
//过滤姓名
$scope.name = "";
$scope.flag = "";
$scope.flag2 = false;
$scope.filName = function(){
if($scope.name.indexOf("法轮功")>=0){
alert("不能包含敏感字符");
return false;
//$scope.flag = "";
}
if($scope.name == ""){
alert("请输入姓名");
$scope.flag = "";
}else{
for(index in $scope.position){
if($scope.name == $scope.position[index].name){
$scope.flag = $scope.name;
$scope.flag2 = true;
}else{
}
}
}
if(!$scope.flag2){
alert("没有找到匹配项");
}
}
//确定用户提交页面显示隐藏
$scope.isShow = false;
$scope.show = function(){
if($scope.isShow){
$scope.isShow = false;
}else{
$scope.isShow = true;
}
}
//验证age--->angular形式
$scope.newAge = "";
$scope.newName = "";
$scope.newPinyin = "";
$scope.newPos = "";
$scope.checkAge = function(){
if($scope.newAge == "" || $scope.newAge == null){
alert("年龄不能为空");
}else if(isNaN($scope.newAge)){
alert("年龄格式不正确")
}else if($scope.newAge<0 || $scope.newAge>150){
alert("输入的不是人的年龄")
}else{
var peo = {
name:$scope.newName,
age:$scope.newAge,
pinyin:$scope.newPinyin,
zhiwei:$scope.newPos
};
$scope.position.push(peo);
}
}
//点击删除按钮, 删除当前商品
$scope.delProduct = function(delName){
for(index in $scope.position){
if (delName == $scope.position[index].name) {
if(confirm("确定删除吗?") == true){
$scope.position.splice(index,1);
}else{
return false;
}
} else{
return false;
}
}
}
});
</script>
//下面数页面展示的布局
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>用户列表</h3>
用户名查询：<input type="text" ng-model="name"/>
<select ng-model="ageOrder">
<option value="">--请选择--</option>
<option value="age">年龄正序</option>
<option value="-age">年龄倒序</option>
</select><br />
用户列表<br />
<table border="1px solid blue" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>拼音</th>
<th>职位</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="pos in position | filter:flag | orderBy:ageOrder">
<td>{{pos.name}}</td>
<td>{{pos.age}}</td>
<td>{{pos.pinyin}}</td>
<td>{{pos.zhiwei}}</td>
<td><button ng-click="delProduct(pos.name)">删除</button></td>
</tr>
</tbody>
</table><br />
<button ng-click="filName()">查询</button>
<button ng-click="show()">添加用户</button><br /><br />
<div ng-show="isShow">
<h3>添加用户</h3>
用户名：<input type="text" placeholder="请输入用户名" ng-model="newName"/><br /><br />
拼 音：<input type="text" placeholder="请输入拼音" ng-model="newPinyin"/><br /><br />
年 龄：<input type="text" placeholder="请输入年龄" ng-model="newAge"/><br /><br />
职 位：<input type="text" placeholder="请输入职位" ng-model="newPos"/><br /><br />
<input type="button" ng-click="checkAge()" value="提交" />
</div>
</center>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 2. AngularJs+JQuery：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息
- table jquery angular删除添加排序
- AngularJs+JQuery：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息
- jQuery表格常用操作方法-增加，查询，删除，排序，移动，全选
- Angular用户查询，按条件排序，批量删除，添加，敏感字屏蔽
- angular表格的查询添加和排序
- jquery应用实例一动态添加删除生成表格table
- jquery 动态控制表格，添加，删除，上移，下移，排序
- Jquery html<table>数据行的添加和删除
- javascript表格操作大全：表格排序/倒序、动态添加列、批量删除、删除一行、隔行变色、鼠标悬浮切换背景色、全选/反选。（IE、火狐都兼容）
- jQuery为table表格动态添加或删除tr
- javascript表格操作大全：表格排序/倒序、动态添加列、批量删除、删除一行、隔行变色、鼠标悬浮切换背景色、全选/反选。（IE、火狐都兼容）
- angular实现添加,删除,查询,排序
- Angular,添加,删除,查询,排序
- html+css+angularjs 实现商品库存信息管理页面 可删除/批量删除/可模糊查询/可升序降序
- jQuery动态对表格Table进行添加或删除行以及修改列值操作
- angular 请求网络数据 展示table 查询关键字 过滤 删除 添加 修改
- jQuery表格常用操作方法-增加，查询，删除，排序，移动，全选
- jquery table表格添加删除数据（含批量删除，全选全不选和简单的表单验证）
- 简单排序，单一删除，隔行换色，模糊查询，添加用户