一个不包含后台的，仅仅是静态网页上的表格的增删改查的一些方法，上代码：
这里，本人使用的是第三方的导入的jar包，不是直接从网络上获取的
效果如下图
下面就是代码了
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.bb{
width: 100px;
height: 50px;
color: #800080;
margin-left: 10px;
background-color: yellowgreen;
border-radius: 15%;
}
.bb:hover{
transform: scale(1.1);
}
#rkbut{
font-size: 15px;
font-family: "微软雅黑";
border: 0px;
margin-left: 280px;
}
#plbut{
font-size: 15px;
font-family: "微软雅黑";
border: 0px;
}
#qkbut{
font-size: 15px;
font-family: "微软雅黑";
border: 0px;
}
/*实现隔行换色的效果 odd为奇数 even为偶数*/
.tab tr:nth-child(odd){
background-color: #D2B48C;
}
.tab tr:nth-child(even){
background-color: #F5DEB3;
}
.tab tr:hover{
background-color: #9ACD32;
}
.j{
border: 0px;
background-color: white;
height: 20px;
border-radius: 20%;
}
.j:active{
transform: scale(1.1);
background-color: fuchsia;
}
.but{
border: 0px;
background-color: #8A2BE2;
width: 45px;
height: 30px;
color: white;
border-radius: 10%;
}
.but:hover{
transform: scale(1.1);
}
</style>
<script type="text/javascript" src="libs/angular.min.js" ></script>
<script type="text/javascript" src="libs/angular-route.min.js" ></script>
<script>
var app = angular.module("MyApp",[]);
app.controller("Mycon",function($scope){
//获取系统当前时间
var aa = new Date();
//初始化数据,json格式数据（自定义数据）
$scope.goods = [
{
"names":"云南白药",
"numbers":100,
"louders":"云南",
"prices":19.9,
"datas":aa,
"ss":false
},
{
"names":"999感冒灵",
"numbers":30,
"louders":"北京",
"prices":12.5,
"datas":aa,
"ss":false
},
{
"names":"感康",
"numbers":20,
"louders":"河北",
"prices":16.9,
"datas":aa,
"ss":false
},
{
"names":"板蓝根",
"numbers":120,
"louders":"河北",
"prices":16.9,
"datas":aa,
"ss":false
}
];
//入库的按钮点击事件
$scope.rk = function(){
//sos等于true的目的是，点击入库按钮，使下方的新增数据展示出来，它默认是不展示的
$scope.sos = true;
}
//把初始化的数据赋值给goodis，是为了下面点击保存时，只需保存一个对象
$scope.goodis = $scope.goods;
//点击保存的点击事件
$scope.bc = function(){
var flag = false;
//判断货物名称不能为空
if($scope.n==""||$scope.n==null){
flag = false;
alert("货物名称不能为空哦！☺");
return;
}else{
flag = true;
}
//判断获无数量不能为空和货物数量必须是数字
if($scope.num==""||$scope.num==null){
flag = false;
alert("货物数量不能为空哦！☺");
return;
}else if(isNaN($scope.num)){//isNaN(x)的意思是 ：x必须是字符串，不能是数字，是数字返回false
flag = false;
alert("货物数量必须是数字哦！☺");
return;
}else{
flag = true;
}
//判断货物产地不能为空
if($scope.loud==""||$scope.loud==null){
flag = false;
alert("货物产地不能为空哦！☺");
}else{
flag = true;
}
//判断货物价钱不能为空
if($scope.p==""||$scope.p==null){
flag = false;
alert("货物价钱不能为空哦！☺");
return;
}else if(isNaN($scope.p)){//isNaN(x)的意思是 ：x必须是字符串，不能是数字，是数字返回false
flag = false;
alert("货物价钱必须是数字哦！☺");
return;
}else{
flag = true;
}
//点击把新增的数据通过push()方法增加到table表格中
if(flag&&confirm("确定增加吗？")){
//把从输入框中获取到的值重新给数据赋值
$scope.goodis ={
"id":$scope.id1,
"names":$scope.n,
"numbers":$scope.num,
"louders":$scope.loud,
"prices":$scope.p,
"datas":aa
};
$scope.goods.push($scope.goodis);
//sos等于false的目的是点击保存按钮，使下方的新增数据再隐藏起来
$scope.sos = false;
}
//增加过后，清空表格中的数据
$scope.id1 = "";
$scope.n = "";
$scope.num = "";
$scope.loud = "";
$scope.p = "";
}
//点击删除的点击事件
$scope.remove = function(index){
if(confirm("您确定要删除吗?")){
$scope.goods.splice(index,1);
if($scope.goods.length==0){
alert("惨了，咱家没货了！┭┮﹏┭┮");
}
}else{
alert("您取消了删除哟！(＾Ｕ＾)ノ~ＹＯ");
}
}
//点击查询的点击事件
$scope.cx = function(){
$scope.zz = [];
var txt = $scope.txt;
if(txt==""||txt==null){
alert("您输入的为空哦！");
$scope.goods = [
{
"names":"云南白药",
"numbers":100,
"louders":"云南",
"prices":19.9,
"datas":aa
},
{
"names":"999感冒灵",
"numbers":30,
"louders":"北京",
"prices":12.5,
"datas":aa
},
{
"names":"感康",
"numbers":20,
"louders":"河北",
"prices":16.9,
"datas":aa
},
{
"names":"板蓝根",
"numbers":120,
"louders":"河北",
"prices":16.9,
"datas":aa
}
];
}else{
for(var i = 0 ; i < $scope.goods.length;i++){
names = $scope.goods[i].names;
if(names.indexOf(txt)!=-1){
$scope.zz.push($scope.goods[i]);
$scope.goods = $scope.zz;
}else{
if(i==1){
alert("您输入的物品好像不存在哎！");
}
}
}
}
}
$scope.op = "按数量倒序";
//这是下拉框的改变事件，原理是冒泡排序
$scope.cc = function(){
if($scope.op=="按数量正序"){
$scope.goods.sort(function(a,b){
return a.numbers - b.numbers;
});
}else{
$scope.goods.sort(function(a,b){
return b.numbers - a.numbers;
});
}
}
var index1 = 0;
//点击展示修改页面
$scope.updateShow = false;
$scope.updateId = "";
$scope.updateName = "";
$scope.updateNum = "";
$scope.updateloc = "";
$scope.updatePrice = "";
$scope.updateShowFun = function(index) {
index1 = index;
if(window.confirm("你确定要修改吗？ 请在考虑一下！")) {
$scope.updateShow = true;
$scope.updateID = $scope.goods[index].id;
$scope.updateName = $scope.goods[index].names;
$scope.updateNum = $scope.goods[index].numbers;
$scope.updateloc = $scope.goods[index].louders;
$scope.updatePrice = $scope.goods[index].prices;
} else {
alert("你已经取消了修改哟！(＾Ｕ＾)ノ~ＹＯ");
}
}
//点击修改按钮
$scope.updateSub = function() {
var flag = false;
if($scope.updateName==""||$scope.updateName==null){
flag = false;
alert("货物名称不能为空哦！☺");
return;
}else{
flag = true;
}
//判断获无数量不能为空和货物数量必须是数字
if($scope.updateNum==""||$scope.updateNum==null){
flag = false;
alert("货物数量不能为空哦！☺");
return;
}else if(isNaN($scope.updateNum)){//isNaN(x)的意思是 ：x必须是字符串，不能是数字，是数字返回false
flag = false;
alert("货物数量必须是数字哦！☺");
return;
}else{
flag = true;
}
//判断货物产地不能为空
if($scope.updateloc==""||$scope.updateloc==null){
flag = false;
alert("货物产地不能为空哦！☺");
}else{
flag = true;
}
//判断货物价钱不能为空
if($scope.updatePrice==""||$scope.updatePrice==null){
flag = false;
alert("货物价钱不能为空哦！☺");
return;
}else if(isNaN($scope.updatePrice)){//isNaN(x)的意思是 ：x必须是字符串，不能是数字，是数字返回false
flag = false;
alert("货物价钱必须是数字哦！☺");
return;
}else{
flag = true;
}
if(flag&&confirm("确认修改吗？")){
$scope.goods[index1].names = $scope.updateName,
$scope.goods[index1].numbers = $scope.updateNum,
$scope.goods[index1].louders = $scope.updateloc,
$scope.goods[index1].prices = $scope.updatePrice,
$scope.goods[index1].datas = aa;
$scope.updateShow = false;
}
}
//点击全选和全不选
$scope.ck = function(){
if($scope.cck){
for(var i=0;i<$scope.goods.length;i++){
$scope.goods[i].ss = true;
}
}else{
for(var i=0;i<$scope.goods.length;i++){
$scope.goods[i].ss = false;
}
}
}
//点击反选
$scope.fx = function(){
if($scope.ffx){
for(var i=0;i<$scope.goods.length;i++){
if($scope.goods[i].ss){
$scope.goods[i].ss = false;
}else{
$scope.goods[i].ss = true;
}
}
}else{
for(var i=0;i<$scope.goods.length;i++){
if($scope.goods[i].ss){
$scope.goods[i].ss = false;
}else{
$scope.goods[i].ss = true;
}
}
}
}
//点击批量删除的方法
$scope.plremove = function(){
var arr = [];
for(var i=0; i < $scope.goods.length; i++){
if($scope.goods[i].ss){
arr.push($scope.goods[i].names);
}
}
if(arr.length<=0){
alert("请您选中一条数据再进行删除哦！☺");
}else{
for (var j = 0; j<arr.length; j++) {
for (var i=0; i < $scope.goods.length; i++) {
if((arr[j]==$scope.goods[i].names)){
$scope.goods.splice(i,1);
}
}
}
if($scope.goods.length==0){
alert("惨了，咱家没货了！┭┮﹏┭┮");
}
}
}
//计算总价的方法
$scope.goodsPrices = function(){
var price = 0;
for(var i=0;i<$scope.goods.length;i++){
price+=$scope.goods[i].numbers*$scope.goods[i].prices;
}
return price;
}
//计算总量的方法
$scope.goodsNums = function(){
var num = 0;
for(var i=0;i<$scope.goods.length;i++){
num+=$scope.goods[i].numbers;
}
return num;
}
//点击增加货物数量
$scope.jia = function(index){
$scope.goods[index].numbers++;
}
//点击货物数量减减
$scope.jian = function(index){
$scope.goods[index].numbers--;
if($scope.goods[index].numbers<=0){
if(confirm("是否要删除？")){
$scope.goods.splice(index,1);
}else{
alert("您取消了删除！");
$scope.goods[index].numbers+=1;
return;
}
}
}
//清空库存的方法（一键清空）
$scope.removeAll = function(){
if(confirm("确定清空吗？")){
$scope.goods = [];
alert("已清空...");
}else{
alert("取消清空");
}
}
});
</script>
</head>
<body ng-controller="Mycon">
<h1 style="margin-left: 330px;">商品库存管理系统</h1><br />
<input type="text" placeholder="请输入关键词" ng-model="txt" />
<input type="button" value="查询" ng-click="cx()" />
<select ng-change="cc()" ng-model="op">
<option>按数量倒序</option>
<option>按数量正序</option>
</select>
<input id="rkbut" class="bb" type="button" value="入库" ng-click="rk()" />
<input id="plbut" class="bb" type="button" value="批量删除" ng-click="plremove()" />
<input id="qkbut" class="bb" type="button" value="清空库存" ng-click="removeAll()" />
<br /><br />
<table class="tab" border="1" cellpadding="6" cellspacing="0">
<tr style="background-color: darkcyan;">
<td>
<input type="checkbox" ng-click="ck()" ng-model="cck"/>全选/全不选<br />
<input type="checkbox" ng-click="fx()" ng-model="ffx"/>反选
</td>
<th>货物编号</th>
<th>货物名称</th>
<th>货物数量</th>
<th>货物产地</th>
<th>货物单价</th>
<th>货物的生产日期</th>
<th>操作</th>
</tr>
<tr ng-repeat="good in goods | filter : {names:txt}">
<td>
<input type="checkbox" ng-model="good.ss" />
</td>
<td>{{$index+1}}</td>
<td>{{good.names}}</td>
<td><input class="j" type="button" value="-" ng-click="jian($index)" /><input type="number" placeholder="0" ng-model="good.numbers" /><input class="j" type="button" value="+" ng-click="jia($index)" /></td>
<td>{{good.louders}}</td>
<td>{{good.prices | currency:'￥'}}</td>
<td>{{good.datas | date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td>
<input class="but" type="button" value="删除" ng-click="remove($index)"/>
<button class="but" ng-click="updateShowFun($index)" class="sb">修改</button>
</td>
</tr>
</table>
<br />
<b>货物总价：</b><span>{{goodsPrices() | currency:'￥'}}</span><br />
<b>货物总量：</b><span>{{goodsNums() | number}}</span><br />
<fieldset style="border: 1px solid blue; width: 550px; background-color: #D2B48C;" ng-show="sos">
<legend style="background-color: cornflowerblue; color: aliceblue;"><b>新增货物</b></legend>
<table border="0">
<tr>
<td>货物名称</td>
<td><input type="text" value="" placeholder="请输入货物名称" ng-model="n"/></td>
</tr>
<tr>
<td>货物数量</td>
<td><input type="number" value="" placeholder="请输入货物数量" ng-model="num"/></td>
</tr>
<tr>
<td>货物产地</td>
<td><input type="text" value="" placeholder="请输入货物产地" ng-model="loud"/></td>
</tr>
<tr>
<td>货物单价</td>
<td><input type="number" value="" placeholder="请输入货物单价" ng-model="p"/></td>
</tr>
<tr>
<td><input class="but" type="button" value="保存" ng-click="bc()"/></td>
</tr>
</table>
</fieldset>
<br />
<fieldset style="border: 1px solid blue; width: 550px; background-color: #D2B48C;" ng-show="updateShow">
<legend style="background-color: cornflowerblue; color: aliceblue;"><b>修改商品</b></legend>
货物名称:
<input type="text" placeholder="请输入要修改的货物名称" ng-model="updateName" /><br /><br />
货物数量:
<input type="number" placeholder="请输入要修改的货物数量" ng-model="updateNum" /><br /><br />
货物产地:
<input type="text" placeholder="请输入要修改的货物产地" ng-model="updateloc" /><br /><br />
货物单价:
<input type="number" placeholder="请输入要修改的货物单价" ng-model="updatePrice" /><br /><br />
<input type="button" class="but" value="提交" ng-click="updateSub()" class="sb" />
</fieldset>
</body>
</html>