表格的增删改查和判断

最新推荐文章于 2022-11-15 18:39:22 发布

无糖咖啡有点苦

最新推荐文章于 2022-11-15 18:39:22 发布

阅读量235

点赞数

本文链接：https://blog.csdn.net/qq1135058549/article/details/79092921

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<style>
.tab1 tbody tr:nth-child(odd){
background: silver;
}
.tab1 thead tr{
background: grey;
}
.tab1{
width: 700px;
}
.tab2{
margin-top: 30px;
margin-left: 100px;

}
</style>
<script>
angular.module("myApp",[]).controller("myCtrl",
function($scope) {

$scope.title="id";
$scope.desc=false;

$scope.arrs = [{
"id": 1,
"name": "OPPO R9sk",
"username": "关羽",
"tel": "15777777777",
"price": 4999,
"city": "北京",
"time":"08-11 12-11",
"fahuo":"发货",
"state":false
}, {
"id": 2,
"name": "VIVO X20",
"username": "赵云",
"tel": "15333333333",
"price": 2998,
"city": "天津",
"time": "04-11 12-11",
"fahuo":"发货",
"state":false
}, {
"id": 3,
"name": "iPhone 8 Plus",
"username": "曹操",
"tel": "15111111111",
"price": 7588,
"city": "上海",
"time": "12-11 12-11",
"fahuo":"发货",
"state":false
}];

//全选
$scope.check=function(){
var is=$scope.ischeck;
for (var i=0;i<$scope.arrs.length;i++) {
$scope.arrs[i].state=is;
}
}
//删除
$scope.del=function(a){
if(confirm("确定删除用户？")){
for (var i=0;i<$scope.arrs.length;i++) {
if($scope.arrs[i].id==a.id){
$scope.arrs.splice(i,1);
}
}
}
}

//批量删除
$scope.pidel=function(){
var datas=[];
for (var b=0;b<$scope.arrs.length;b++) {
if($scope.arrs[b].state==true){
datas.push($scope.arrs[b].name);
}
}
if(datas.length>0){
if(confirm("确定删除用户？")){
for (i in datas) {
var name=datas[i];
for (j in $scope.arrs) {
if($scope.arrs[j].name==name){
$scope.arrs.splice(j,1);
}
}
}
}

}else{
alert("请选择");
}
}
//点击修改发货
$scope.zhuang=function(index){
if($scope.arrs[index].fahuo=="发货"){
$scope.arrs[index].fahuo="已发货";
console.log($scope.arrs);
}
}

$scope.zhengfu = "";
//点击按钮根据列名排序
$scope.idsort = function(liem) {

if($scope.zhengfu == true) {
$scope.zhengfu = false;
} else {
$scope.zhengfu = true;
}
}

//批量发货
$scope.pilFa=function(){
for (var i=0;i<$scope.arrs.length;i++) {
if($scope.arrs[i].state){
$scope.arrs[i].fahuo="已发货";
}
}
}

//添加数据
$scope.name1="";
$scope.username1="";
$scope.price1="";
$scope.tel1="";
$scope.city1="";
$scope.time1="";
$scope.add=function(){
var aas={
"id": $scope.arrs.length+1,
"name":$scope.name1,
"username":$scope.username1,
"tel":$scope.tel1,
"price":$scope.price1,
"city": $scope.city1,
"time":$scope.time1,
"fahuo":"发货",
"state":false
}
$scope.arrs.push(aas);
for (var i=0;i<$scope.arrs.length;i++) {

$scope.arrs[i].name=$scope.arrs[i].name.replace("/米/g","*");

}

}

//点击新增弹出框
$scope.tab=false;
$scope.zeng=function(){
$scope.tab=true;
}

// ng-show="faH(a.fahuo,selfahuo)&&seltime(a.time,startm,endm)
$scope.selfahuo="选择状态";
$scope.faH=function(fahuo,selfahuo){
if($scope.selfahuo=="选择状态"){

return true;
}else{
for (var i=0;i<$scope.arrs.length;i++) {
if(fahuo==selfahuo){
return true;
}else{
return false;
}
}
return false;
}
}

$scope.startm="开始月份";
$scope.endm="结束月份";

$scope.seltime=function(time,startm,endm){
if($scope.startm=="开始月份"||$scope.endm=="结束月份"){
return true;
}else{
var spl=time.split(" ");
var timespl=spl[0].split("-");

var numtime=parseInt(timespl[0]);
if(numtime>=$scope.startm&&numtime<=$scope.endm){
return true;
}else{
return false;
}
}
}

$scope.orderAll=function(){
var iszh=$scope.isAll;
if(iszh=="1"){
$scope.title="tel";
$scope.desc=false;
}else if(iszh=="2"){
$scope.title="tel";
$scope.desc=true;
}else if(iszh=="3"){
$scope.title="price";
$scope.desc=false;
}else if(iszh=="4"){
$scope.title="price";
$scope.desc=true;
}
}

})

.filter("myfilter",function(){
return function(aa){
if(aa!=undefined&&aa.length>0){
var min=aa.replace(/米/g,"*");

return min;
}
}
})
</script>

</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" placeholder="用户名搜索" ng-model="sname"/>
<input type="text" placeholder="手机号搜索" ng-model="stel"/>
<select ng-model="selcity">
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>重庆</option>
<option>天津</option>
</select>
<select ng-model="selfahuo">
<option>选择状态</option>
<option>已发货</option>
<option>发货</option>
</select>
<select ng-model="startm">
<option>开始月份</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select ng-model="endm">
<option>结束月份</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select ng-model="isAll" ng-change="orderAll()">
<option value="1">按电话正序排</option>
<option value="2">按电话倒序排</option>
<option value="3">按价格正序排</option>
<option value="4">按价格倒序排</option>
</select>
<br />
<input type="button" value="新增订单" style="background: green;margin-top: 10px;" ng-click="zeng()"/>
<input type="button" value="批量发货" style="background: green;margin-top: 10px;" ng-click="pilFa()"/>
<input type="button" value="批量删除" style="background: red;margin-top: 10px;" ng-click="pidel()"/>

<table border="1px" class="tab1" cellspacing="0" cellpadding="0">
<thead>
<tr align="center">
<td><input type="checkbox" ng-model="ischeck" ng-click="check()"/></td>
<td><a href="#" style="color: black; text-decoration: none;" ng-click="idsort('id')">ID</a></td>
<td>商品名</td>
<td>用户名</td>
<td ng-click="title='tel';desc=!desc">手机号</td>
<td ng-click="title='price';desc=!desc">价格</td>
<td>城市</td>
<td>下单时间</td>
<td>状态</td>
<td>操作</td>

</tr>
</thead>
<tbody>
<tr ng-repeat="a in arrs|orderBy:'id':zhengfu|orderBy:title:desc|filter:{'name':sname,'tel':stel,'city':selcity}" ng-show="faH(a.fahuo,selfahuo)&&seltime(a.time,startm,endm)" align="center">
<td><input type="checkbox" ng-model="a.state"/></td>
<td>{{a.id}}</td>
<td>
<span ng-hide="a.edit">{{a.name|myfilter}}</span>
<span ng-show="a.edit==true"><input type="text" ng-model="a.name"/></span>
</td>
<td>{{a.username}}</td>
<td>{{a.tel}}</td>
<td>{{a.price|currency:"￥"}}</td>
<td>{{a.city}}</td>
<td>{{a.time}}</td>
<td>
<span ng-show="a.fahuo=='发货'"><a href="#" ng-click="zhuang($index)">{{a.fahuo}}</a></span>
<span ng-show="a.fahuo=='已发货'">{{a.fahuo}}</span>
</td>
<td><a href="#" ng-hide="a.edit" ng-click="a.edit=true">修改</a>
<a href="#" ng-show="a.edit==true" ng-click="a.edit=false">保存</a>

<a href="#" ng-click="del(a)">删除</a></td>
</tr>
</tbody>
</table>

<table border="1px" class="tab2" ng-show="tab">
<tr>
<td><input type="text" placeholder="输入商品名" ng-model="name1"/></td>
</tr>
<tr>
<td><input type="text" placeholder="输入用户名" ng-model="username1"/></td>
</tr>
<tr><td><input type="text" placeholder="价格" ng-model="price1"/></td></tr>
<tr><td><input type="text" placeholder="手机号" ng-model="tel1"/></td></tr>
<tr><td><input type="text" placeholder="城市" ng-model="city1"/></td></tr>
<tr><td><input type="text" placeholder="下单时间" ng-model="time1"/></td></tr>
<tr align="center"><td><input type="button" value="提交" ng-click="add()"/></td></tr>

</table>

</body>
</html>

无糖咖啡有点苦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格的增删改查和判断

.tab1 tbody tr:nth-child(odd){ background: silver; } .tab1 thead tr{ background: grey; } .tab1{ width: 700px; } .tab2{ margin-top: 30px; margin-left: 100px; } an
复制链接

扫一扫