隔换色

最新推荐文章于 2021-08-03 22:25:18 发布

神游仙人

最新推荐文章于 2021-08-03 22:25:18 发布

阅读量118

点赞数

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>

	<style type="text/css">
	.main{
	text-align: center;
	}
	thead{
	background: gray;
	}
	tbody tr:nth-child(even){
	/下标从1开始 even偶数/
	background-color: white;
	}
	tbody tr:nth-child(odd){
	/下标从1开始 odd奇数/
	background-color: gainsboro;
	}
	ul{
	list-style:none;
	padding-top: 5px;
	padding-bottom: 5px;
	clear: both;/清除浮动/
	width: 60%;
	margin: 0 auto;
	padding-left: 0px;
	}
	ul li{
	margin-top: 5px;
	}
	.goods{

	width: 60%;
	margin: 0 auto;
	}
	.goods input[type="text"]{
	float: left;
	margin-top: 10px;
	margin-bottom: 10px;
	}
	.goods select{
	float:right;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 30px;
	height: 22px;
	}
	#btn_add{
	float:right;
	margin-top: 10px;
	margin-bottom: 10px;
	background: green;
	border-radius: 5px;
	border: 0px;
	width: 90px;
	}
	#input_date{
	width: 158px;
	height: 15px;
	padding-left: 0px;
	padding-top: 1px;
	padding-bottom: 1px;
	}
	</style>
	</head>
	<body ng-app="myapp" ng-controller="myctrl">


	<div class="main">
	<h2>商品库存管理系统</h2>
	<div class="goods">
	<!--placeholder 相当于hint 提示文字-->
	<input type="text" name="" value="" placeholder="输入关键字搜索..." ng-model="searchKey"/>

	<input type="button" name="" id="btn_add" value="入库" ng-click="isAdd=!isAdd" />

	<select ng-model="orderKey">
	<option value="num">按货物数量正序排列</option>
	<option value="-num">按货物数量倒序排列</option>
	<option value="gdate">按入库时间正序排列</option>
	<option value="-gdate">按入库时间倒序排列</option>
	</select>


	</div>

	<ul ng-show="isAdd">
	<li>货物名称 <input type="text" ng-model="gname"/></li>
	<li>货物数量 <input type="text" ng-model="gnum"/></li>
	<li>货物产地 <input type="text" ng-model="gproduction"/></li>
	<li>货物单价 <input type="text" ng-model="gprice"/></li>
	<li>入库日期 <input type="date" ng-model="ggdate" id="input_date"/></li>
	<li><input type="button" value="保存" ng-click="saveGoods()"/></li>
	</ul>



	<div class="goods">
	<table border="1" cellspacing="0" cellpadding="0" width="100%">
	<thead><tr>
	<th>货物名称</th>
	<th>货物数量</th>
	<th>货物产地</th>
	<th>货物单价</th>
	<th>货物入库日期</th>
	<th>操作</th>

	</tr></thead>
	<tbody>
	<tr ng-repeat="x in goods\|filter:searchKey\|orderBy:orderKey">
	<td>{{x.name}}</td>
	<td>{{x.num}}</td>
	<td>{{x.production}}</td>
	<td>{{x.price\|currency:"￥:"}}</td>
	<td>{{x.gdate}}</td>
	<td><input type="button" name="" id="" value="删除" ng-click="delgoods(x.name)"/></td>

	</tr>

	</tbody>
	</table>
	</div>






	</div>



	<script type="text/javascript">
	var app=angular.module("myapp",[]);
	app.controller("myctrl",function($scope){
	//搜索关键字
	$scope.searchKey="";
	//初使化
	$scope.orderKey="num";
	//不显示
	$scope.isAdd=false;


	$scope.goods=[
	{name:"云南白药",num:100,production:"云南",price:19.9,gdate:"2017-3-11 09:32:31"},
	{name:"999感冒灵",num:30,production:"北京",price:12.5,gdate:"2017-3-12 09:32:31"},
	{name:"感康",num:20,production:"河北",price:16.6,gdate:"2017-3-13 10:32:31"}];


	$scope.delgoods=function(gname){
	//弹出确认窗口 alert confirm promt
	var c=confirm("确定要删除吗？");
	if(c){//点击了确定按钮
	for (var i = 0; i < $scope.goods.length; i++) {
	if($scope.goods[i].name==gname){
	$scope.goods.splice(i,1);//进行删除
	break;
	}
	}
	alert("删除成功！");

	}else{

	}

	}

	$scope.saveGoods=function(){
	//定义一个对象
	var newgoods={};
	newgoods.name=$scope.gname;
	newgoods.num=$scope.gnum;
	newgoods.production=$scope.gproduction;
	newgoods.price=$scope.gprice;
	newgoods.gdate=$scope.ggdate;

	//进行添加
	$scope.goods.push(newgoods);


	}



	});

	</script>
	</body>
	</html>