模糊查询，，排序，，隔行变色，，全选，反选，批量删除，修改

最新推荐文章于 2023-03-13 14:19:58 发布

wsj19970717

最新推荐文章于 2023-03-13 14:19:58 发布

阅读量210

点赞数

本文链接：https://blog.csdn.net/wsj19970717/article/details/78827442

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>模拟周考3</title>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/jQuery-2.1.0/jquery-2.1.0.js" ></script>

<style type="text/css">
tbody tr:nth-child(even)
{
background: #666;
}
tbody tr:nth-child(odd)
{
background: greenyellow;
}

</style>
<script>
var app= angular.module("myApp",[]);
app.controller("myCtril",function($scope){
$scope.shops=[{
id:80,
name: "iphope",
price:"5400"
},{
id:290,
name: "ipad",
price:"1420"
},{
id:500,
name: "ipad air",
price:"2340"
},{
id:910,
name: "imac",
price:"1540"
},{
id:1200,
name: "ipad mini",
price:"2200"
}];
/*删除按钮*/
$scope.de=function(name){
if(window.confirm("确定要删除"+name+"吗？")){
for(index in $scope.shops){
if(name == $scope.shops[index].name){
$scope.shops.splice(index,1);
}
}
}
}

//修改
$scope.xg = function(price){
for (index in $scope.shops) {
if (price == $scope.shops[index].price) {
var result = parseInt(window.prompt("清输入要修改的价格",price));
if (result<0) {
alert("输入有误，请重新输入");
} else{
if (window.confirm("确定要将"+$scope.shops[index].name+"的价格更改为:"+result+"吗？")) {
$scope.shops[index].price = result;
}
}
} else{

}
}
}
//全选，全不选
$scope.selectAll=false;
$scope.selectAllFun=function(){
if ($scope.selectAll){
for(index in $scope.shops){
$scope.shops[index].state =true;
}
}else{
for (index in $scope.shops){
$scope.shops[index].state=false;
}
}
}

//反选
$scope.checkSelecetAll = function(){
var flag = false;
for (index in $scope.shops) {
if (!$scope.shops[index].state) {
flag = true;
}
}
if (flag) {
$scope.selectAll = false;
} else{
$scope.selectAll = true;
}
}

//批量删除
$scope.plsc = function(){
var is = [];
for (index in $scope.shops) {
if ($scope.shops[index].state) {
is.push($scope.shops[index]);
}
}
for (index in is) {
var name = is[index].name;
for (index2 in $scope.shops) {
if (name == $scope.shops[index2].name) {
$scope.shops.splice(index2,1);
}
}
}
}

});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtril">
<center>
<h3>购物车</h3>
产品名称 <input type="text" placeholder="产品名称" ng-model="cx"/>
排序 <select ng-model="sel">
<option value="">排序方式</option>
<option value="id">id正序</optgroup>
<option value="-id">id逆序</optgroup>
<option value="price">价格正序</optgroup>
<option value="-price">价格逆序</optgroup>
</select>
<button ng-click="plsc()">批量删除</button>
<br /><br />

<table border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"></th>
<th>产品编号</th>
<th>产品名称</th>
<th>产品价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="shop in shops | filter:{name:cx} |orderBy:sel">
<td><input type="checkbox" ng-model="shop.state" ng-click="checkSelecetAll()"></td>
<td>{{shop.id}}</td>
<td>{{shop.name}}</td>
<td>{{shop.price}}</td>
<td><button ng-click="de(shop.name)">删除</button>
<button ng-click="xg(shop.price)">修改</button></td>
</tr>
</tbody>

</table>
</center>
</body>
</html>

wsj19970717

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模糊查询，，排序，，隔行变色，，全选，反选，批量删除，修改

模拟周考3 作者：offline 时间：2017-12-17 描述：隔行变色 -->tbody tr:nth-child(even){ background: #666; } tbody tr:nth-child(odd) {
复制链接

扫一扫