隔行换色

最新推荐文章于 2024-01-24 16:29:20 发布

临丶

最新推荐文章于 2024-01-24 16:29:20 发布

阅读量168

点赞数

本文链接：https://blog.csdn.net/qq_41927301/article/details/80518608

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="libs/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="libs/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
$scope.goods = [{
"id": 1,
"name": "小米5",
"price": 1600,
"product": "北京"
},
{
"id": 2,
"name": "华为p10",
"price": 4200,
"product": "东莞"
},
{
"id": 3,
"name": "vivox20",
"price": 2600,
"product": "佛山"
}
];
$scope.seacherKey ="";
$scope.orderKey = "";
$scope.showAdd = false;
//入库/增加
$scope.addGood = function(){
var good = {};
good.name = $scope.name;
good.price = $scope.price;
good.product = $scope.product;
$scope.goods.push(good);
}
//批量删除
$scope.deleteMore = function(){
if($scope.checkAll){
$scope.goods = [];
}else{
var ches = $("input[type=checkbox]:checked");
for (var i = ches.length-1;i>=0; i--) {
$scope.goods.splice(ches[i].value,1);
}
}
}
//删除
$scope.deleteGood = function(gname){
for (var i = 0; i < $scope.goods.length; i++) {
$scope.goods.splice(i,1);
break;
}
}
var updateGood = "";
//修改
$scope.showGood = function(gname){
$scope.showUpdate = true;
for (var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].name == gname){
updateGood = $scope.goods[i];
break;
}
}
$scope.upname = updateGood.name;
$scope.upprice = updateGood.price;
$scope.upproduct = updateGood.product;
}

$scope.updateGood = function(){
updateGood.name = $scope.upname;
updateGood.price = $scope.upprice;
updateGood.product = $scope.upproduct;
$scope.showUpdate = false;
}
});
</script>
<style>
th,
td {
width: 80px;
text-align: center;
}

.yellow {
background-color: gainsboro;
}

.red {
background-color: blue;
}
</style>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<center>
<div>
查询：<input type="text" placeholder="请输入查询关键字" ng-model="seacherKey"/>
排序：<select ng-model="orderKey">
<option value="">请选择</option>
<option value="name">名称正序</option>
<option value="-name">名称倒序</option>
<option value="price">价钱正序</option>
<option value="-price">价钱倒序</option>
</select><br />
<input type="button" value="入库/增加" ng-click="showAdd=!showAdd"/>
</div>
<div ng-show="showAdd">
商品名称：<input type="text" placeholder="请输入商品名称" ng-model="name" /><br />
商品价钱：<input type="number" placeholder="请输入商品价钱" ng-model="price" /><br />
商品产地：<input type="text" placeholder="请输入商品产地" ng-model="product" /><br />
<input type="button" value="添加" ng-click="addGood();" />
</div>
<div><input type="button" value="批量删除" ng-click="deleteMore();" /> </div>
<table border="1" bordercolor="green">
<tr style="background-color: antiquewhite;">
<td><input type="checkbox" ng-model="checkAll"/></td>
<td>序号</td>
<td>Id</td>
<td>商品名称</td>
<td>价钱</td>
<td>产地</td>
<td>操作</td>
</tr>
<tr ng-repeat="g in goods | filter:seacherKey | orderBy:orderKey" class="{{$index%2? 'yellow':'red'}}">
<td><input type="checkbox" ng-model="checkAll"/></td>
<td>{{$index}}</td>
<td>{{g.id}}</td>
<td>{{g.name}}</td>
<td>{{g.price}}</td>
<td>{{g.product}}</td>

<td>
<input type="button" value="删除" ng-click="deleteGood(g.name);" /><br />
<input type="button" value="修改" ng-click="showGood(g.name);" />
</td>
</tr>
</table>
<br />
<div ng-show="showUpdate">
商品名称：<input type="text" placeholder="请输入商品名称" ng-model="upname" /><br />
商品价钱：<input type="number" placeholder="请输入商品价钱" ng-model="upprice" /><br />
商品产地：<input type="text" placeholder="请输入商品产地" ng-model="upproduct" /><br />
<input type="button" value="添加" ng-click="updateGood();" />
</div>
</center>
<p>{{goods}}</p>
</body>

</html>

临丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
隔行换色

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="libs/jquery-1.11.0.min.js"&a
复制链接

扫一扫