验证清空表单

最新推荐文章于 2023-02-22 15:06:06 发布

墨明棋妙呀

最新推荐文章于 2023-02-22 15:06:06 发布

阅读量412

点赞数

本文链接：https://blog.csdn.net/Wangmengyao1115/article/details/78864440

版权

<title></title>
<style>
.first{
background: darkgray;
}
tbody tr:nth-child(odd){
background: aliceblue;
}
tbody tr:nth-child(even){
background: blue;
}
</style>
<script type="text/javascript" src="../angular/angular.js" ></script>
<script type="text/javascript" src="../angular/jquery-2.1.1.js" ></script>
<script>
//改变第一行的颜色
$(function(){
$("thead tr").addClass("first");
})
var app = angular.module("myApp",[]);
//添加数据
app.controller("myCtrl",function($scope){
$scope.products = [{
id:1,
name:"张三",
age:21,
sex:"男",
tel:18611111111,
ah:"只爱学习"
},{
id:2,
name:"李四",
age:20,
sex:"男",
tel:18622222222,
ah:"独自学习"
},{
id:3,
name:"小花",
age:19,
sex:"女",
tel:18633333333,
ah:"听着歌学习"
},{
id:4,
name:"翠花",
age:18,
sex:"女",
tel:18644444444,
ah:"看书学习"
},{
id:5,
name:"小凤",
age:18,
sex:"女",
tel:18655555555,
ah:"去图书馆学习"
}];

//判断
$scope.formShow = false;
$scope.formShowFun = function(){
if($scope.formShow){
$scope.formShow = false;
}else{
$scope.formShow = true;
$scope.updateShow = false;
}
}
//添加
$scope.newId = "";
$scope.newName = "";
$scope.newAge = "";
$scope.newSex = "";
$scope.newTel = "";
$scope.newAh = "";

$scope.sub = function(){
var newPro = {
"id":parseInt($scope.newId),
"name":$scope.newName,
"age":$scope.newAge,
"sex":$scope.newSex,
"tel":$scope.newTel,
"ah":$scope.newAh
};
$scope.products.push(newPro);
}

//修改
$scope.updateShow = false;
$scope.updateId = "";
$scope.updateName = "";
$scope.updateAge = "";
$scope.updateSex = "";
$scope.updateTel = "";
$scope.updateAh = "";

$scope.updateShowFun = function(pro){
$scope.formShow = false;
$scope.updateShow = true;
$scope.updateId = pro.id;
$scope.updateName = pro.name;
$scope.updateAge = pro.age;
$scope.updateSex = pro.sex;
$scope.updateTel = pro.tel;
$scope.updateAh = pro.ah;
}
$scope.updateSub = function(){
$scope.updateArr = [];
if($scope.updateName == "" || $scope.updateName == null){
$scope.updateArr.push("不能空");
}

if($scope.updateAge == "" || $scope.updateAge == null){
$scope.updateArr.push("不能空");
}
if($scope.updateArr.length > 0){
$scope.haha = true;
}else{
$scope.haha = false;
for(index in $scope.products){
if(parseInt($scope.updateId) == $scope.products[index].id){
$scope.products[index].name = $scope.updateName;
$scope.products[index].age = $scope.updateAge;
$scope.products[index].sex = $scope.updateSex;
$scope.products[index].tel = $scope.updateTel;
$scope.products[index].ah = $scope.updateAh;
$scope.updateShow = false;

}
}
}
}
//删除
$scope.delProduct = function(delName){
for(index in $scope.products){
if(delName == $scope.products[index].name){
$scope.products.splice(index,1);
}
}
}

$scope.productId == "请选择";
$scope.isShow = function(id){
if($scope.productId == "请选择"){
return true;
}else{

}
}

//清空
$("button[type='reset']").trigger("click");//触发reset按钮

//通过form表单的dom对象的reset方法来清空
$('form')[0].reset();

});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
年龄排序<select ng-model="selOrder">
<option>请选择</option>
<option value="age">年龄正序</option>
<option value="-age">年龄逆序</option>
</select>

ID排序<select ng-model="selOrder">
<option>请选择</option>
<option value="id">id正序</option>
<option value="-id">id逆序</option>
</select>

姓名<input type="text" ng-model="search" />
<button ng-click="formShowFun()">添加新用户</button><br />

<table border="1px" cellspacing="0" cellpadding="5">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>联系方式</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="pro in products | filter:{'name':search} | orderBy:selOrder">
<td>{{pro.id}}</td>
<td>{{pro.name}}</td>
<td>{{pro.age}}</td>
<td>{{pro.sex}}</td>
<td>{{pro.tel}}</td>
<td>{{pro.ah}}</td>
<td>
<button ng-click="updateShowFun(pro)">修改</button>
<button ng-click="delProduct(pro.name)">删除</button>
</td>
</tr>
</tbody>
</table>

<form style="border: 1px; width: 500px;" ng-show="formShow">
<h3>添加用户</h3><br />
id:<input type="text" ng-model="newId" /><br /><br />
姓名:<input type="text" ng-model="newName" /><br /><br />
年龄:<input type="text" ng-model="newAge" /><br /><br />
性别:<select ng-model="newSex">
<option>请选择</option>
<option>男</option>
<option>女</option>
</select><br /><br />
联系方式:<input type="tel" ng-model="newTel" /><br /><br />
爱好:<input type="text" ng-model="newAh" /><br /><br />
<button ng-click="sub()">添加</button>
<button ng-click="qk()" type="reset">清空</button>
</form>

<form style="border: 1px; width: 500px;" ng-show="updateShow">
<h3>修改用户</h3><br />
id:<input type="text" ng-model="updateId" disabled="disabled"/><br /><br />
姓名:<input type="text" ng-model="updateName" /><br /><br />
年龄:<input type="text" ng-model="updateAge" /><br /><br />
性别:<select ng-model="updateSex">
<option>请选择</option>
<option>男</option>
<option>女</option>
</select><br /><br />
联系方式:<input type="tel" ng-model="updateTel" /><br /><br />
爱好:<input type="text" ng-model="updateAh" /><br /><br />
<div style="border: 1px;" ng-show="haha">
<ul>
<li ng-repeat="chenk in updateArr">{{chenk}}</li>
</ul>
</div><br />
<button ng-click="updateSub()">修改</button>
<button ng-click="qk()" type="reset">清空</button>
</form>
</body>

墨明棋妙呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
验证清空表单

.first{background: darkgray;}tbody tr:nth-child(odd){background: aliceblue;}tbody tr:nth-child(even){background: blue;}//改变第一行的颜色$(function(){$("thead tr").addClass("firs
复制链接

扫一扫