jquery增删改查

最新推荐文章于 2023-10-27 13:30:01 发布
最新推荐文章于 2023-10-27 13:30:01 发布
阅读量955 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y126_Info/article/details/79102878
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>购物车</title>
	<script type="text/javascript" src="js/Angular/angular.js"></script>
	<script>
		var app=angular.module("myApp",[]);
		var data=[{
			id:80,
			name:"iPhone",
			price:5400,
			state:false,
		},{
			id:290,
			name:"ipad",
			price:1420,
			state:false,
		},{
			id:500,
			name:"ipad air",
			price:2340,
			state:false,
		},{
			id:910,
			name:"imac",
			price:15400,
			state:false,
		},{
			id:1200,
			name:"ipad mini",
			price:2200,
			state:false,
	    }]
		
		app.controller("myCtrl",function($scope){
			$scope.data=data;
			$scope.order1='name';
		    $scope.order2='-';
		    
		    $scope.sel="排序方式"
			if($scope.sel=="排序方式"){
				$scope.sel="";
			};
			
			$scope.dian=function(dians){
				$scope.order1=dians;
				if($scope.order2==""){
					$scope.order2="-";
				}else{
					$scope.order2="";
				}
			};
		
		     //添加  
                $scope.add = function(){  
                    if($scope.id == undefined || $scope.id == ""){  
                        alert("编号不能为空！");  
                        return;  
      
                    }  
                    if($scope.name == undefined || $scope.name == ""){  
                        alert("商品名称不能为空！");  
                        return;  
      
                    }  
                    if($scope.price == undefined || $scope.price == ""){  
                        alert("价格不能为空！");  
                        return;  
      
                    }  
                    
                    if (!/^\d+$/.test($scope.id)) {
                        alert("id必须是数字！");  
                        return;  
                    }  
                    
                    
                    if (!/^\d+$/.test($scope.price)) {
                        alert("价格必须是数字！");  
                        return;  
                    }  
      
                    
                    $scope.data.push({  
                        id:$scope.id,  
                        name:$scope.name,  
                        price:$scope.price,  
                        count:$scope.count,  
                    });  
                    $scope.id="";  
                    $scope.name="";  
                    $scope.price="";  
                    $scope.count="";  
                    
                };  
               $scope.addUserIsShow=false;
               $scope.addUser = function(){
                   if($scope.addUserIsShow){
                   	 $scope.addUserIsShow = false;
                   }else{
                   	 $scope.addUserIsShow=true;
                   }
                   
                };  
		    
		    
		    $scope.delete=function(name){
		    	if(name!=""){
		    		if(confirm("确认要删除"+name+"商品吗？")){
		    			var p;
		    			for(index in $scope.data){
		    				p=$scope.data[index];
		    				if(p.name==name){
		    					$scope.data.splice(index,1);
		    				}
		    			}
		    		}
		    	}
		    }
		 
		 //修改内容  
                 $scope.editUserIsShow =false;
                $scope.editUser = function (index) {
                   var item = $scope.data[index];
                    $scope.e_id = item.id;  
                    $scope.e_name = "";  
                    $scope.e_price = "";  
                    $scope.index = index;  
                if($scope.editUserIsShow){
                 	$scope.editUserIsShow=false;
                 }else{
                 	$scope.editUserIsShow=true;
                 }
                };
      
                $scope.edit = function () {  
                    if($scope.e_id == undefined || $scope.e_id == ""){  
                        alert("id不能为空！");  
                        return;  
      
                    }  
                    if($scope.e_name == undefined || $scope.e_name == ""){  
                        alert("商品名不能为空！");  
                        return;  
      
                    }  
                    
                    if($scope.e_price == undefined || $scope.e_price == ""){
                        alert("价格不能为空！");  
                        return;  
      
                    }  
                    
                  
                    if (!/^\d+$/.test($scope.e_id)) {
                        alert("id号必须是数字！");  
                        return;  
                    } 
                    
                    if (!/^\d+$/.test($scope.e_price)) {
                        alert("价格必须是数字！");  
                        return;  
                    }  
      
                    $scope.data[$scope.index].name = $scope.e_name;  
                    $scope.data[$scope.index].price = $scope.e_price;  
                    $scope.data[$scope.index].count = $scope.e_count;  
                    //$scope.editUserIsShow = false;  
                };  
      
		
		//全选、全不选
				$scope.selectAll = false;
				$scope.selectAllFun = function() {
					if($scope.selectAll) {
						for(index in $scope.data) {
							$scope.data[index].state = true;
						}
					} else {
						for(index in $scope.data) {
							$scope.data[index].state = false;
						}
					}
				}

				//反选
				$scope.checkSelAll = function() {
					var flag = false;
					for(index in $scope.data) {
						if(!$scope.data[index].state) {
							//满足条件
							flag = true;
						}
					}

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

		 
		 //批量删除
		  $scope.AllDelete=function(){
		  	var selArr=[];
		  	for(index in $scope.data){
		  	  if($scope.data[index].state){
		  	  	selArr.push($scope.data[index].name);
		  	  }
		  	}
		    
		    if(selArr.length>0){
		    	if(window.confirm("确定要删除吗？")){
		    		for(index1 in selArr){
		    			for(index2 in $scope.data){
		    				if(selArr[index1]==$scope.data[index2].name){
		    					$scope.data.splice(index2,1);
		    				}
		    			}
		    		}
		    	}
		    }else{
		    	alert("请选择");
		    }
		  }
		 
	     //全部删除  
                $scope.removeAll = function () {  
                    if($scope.data.length==0){
                      alert('你的购物车为空');
                    }else{
                     var b = confirm("确认全部删除"); 
                     $scope.data=[];
                    }
                };  
		});
	</script>
	</head>
	<body ng-app="myApp" ng-controller="myCtrl">
	   <center>
	   	  <h1>购物车</h1>
	   	  产品名称:<input type="text" placeholder="产品名称" ng-model="search"/>
	   	  排序: <select ng-model="sel" >
	   	  	    <option value="">排序方式</option>
	   	  	    <option value="id">id正序</option>
	   	  	    <option value="-id">id逆序</option>
	   	  	    <option value="price">价格正序</option>
	   	  	    <option value="-price">价格逆序</option>
	   	  </select><br/><br/>
	   	 <button ng-click="addUser()" style="margin-left: 30px;">添加产品</button>
	   	 <button ng-click="AllDelete()" style="margin-left: 30px;">批量删除</button>
	   	 <button ng-click="removeAll()" style="margin-left: 30px;">全部删除</button><br/><br/>
	   	 <table border="1" cellpadding="10" cellspacing="0">
	   	 	<thead>
	   	 		<tr>
	   	 		  <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></td>
	   	 	      <th ng-click="dian('id')">产品编号</th>
                  <th ng-click="dian('name')">产品名称</th>
                  <th ng-click="dian('price')">产品价格</th>
                  <th align="center">操作</th>	
	   	 		</tr>
	   	 	</thead>
	   	 	<tbody>
	   	 	   <tr ng-repeat="d in data  | filter:{name:search} | orderBy:(order2+order1) |orderBy:sel" >
	   	 	   	 <td><input type="checkbox" ng-model="d.state" ng-click="checkSelAll()"/></td>
	   	 	   	 <td>{{d.id}}</td>
	   	 	   	 <td>{{d.name}}</td>
	   	 	   	 <td>{{d.price | currency:'RMB￥'}}</td>
	   	 	   	 <td><input ng-click="delete(d.name)" type="button"value="删除"/><input type="button" value="修改" ng-click="editUser($index)"/></td>
	   	 	   </tr>	
	   	 	</tbody>
	   	 </table>    
	    <div ng-show="addUserIsShow">
	       <table border="1" cellpadding="10" cellspacing="0">
	       	  <tr>
	    	      <td>产品编号</td>	
	    	      <td><input type="text" ng-model="id"/></td>
	    		</tr>
	    		<tr>
	    	      <td>产品名称</td>	
	    	      <td><input type="text" ng-model="name"/></td>
	    		</tr>
	    		<tr>
	    	      <td>产品价格</td>	
	    	      <td><input type="text" ng-model="price"/></td>
	    		</tr>
	    		<tr>
	    	      <td colspan="2" align="center"><button ng-click="add()">添加</button> </td>	
	    	    </tr>
	       </table>	
	    </div>
	    <div ng-show="editUserIsShow">
	    	<table border="1" cellpadding="10" cellspacing="0">
	    		<tr>
	    	      <td>产品编号</td>	
	    	      <td><input type="text" ng-model="e_id"/></td>
	    		</tr>
	    		<tr>
	    	      <td>产品名称</td>	
	    	      <td><input type="text" ng-model="e_name"/></td>
	    		</tr>
	    		<tr>
	    	      <td>产品价格</td>	
	    	      <td><input type="text" ng-model="e_price"/></td>
	    		</tr>
	    		<tr>
	    	      <td colspan="2" align="center"><button ng-click="edit()">提交</button> </td>	
	    	    </tr>
	    	</table>
	    </div>
	   </center>	
	</body>
</html>
y126_Info
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
jQuery对table表格进行增删改查
10-20
主要为大家详细介绍了jQuery对table表格进行增删改查操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用jquery如何实现增删改查（详细如下：）
why0925123的博客
09-03 2652
利用本地存储和jquery做增删改查
用jQuery实现简单的增删改查操作
weixin_58983198的博客
09-02 1939
【代码】用jQuery实现简单的增删改查操作。
un8.22:用jQuery实现增删改查功能。
努力是为了让自己不平庸。。。
08-22 564
做项目的时候，我们难免会用到各种各样的技术，今天我就来和大家分享一下如何用jQuery来实现增删改查。
jquery的增删改查方法
m0_47720236的博客
03-12 3164
一，查询(兄弟父子节点) ● next() 查找下一个兄弟元素 nextAll() 查询下面所有兄弟 nextUntil() 查到满足参数中条件的某个兄弟为止 ● prev() 查找上一个兄弟元素 ● siblings() 查找所有的兄弟元素 带参数时需要满足参数中的条件 ● parent() 获取元素自身的父元素 ● parents() 获取元素的所有祖先元素（自下往上 HTML为止） ● closest() 查询最近的满足条件的父级 从自己开始查找。如果什么都没找到则返回一个空的
Jquery实现增删改查
m0_64288219的博客
11-04 802
使用的技术 jquery bootstrap 实现功能：实现对数据的添加，删除，修改，查找 原理：利用jquery对dom操作
jquery作品（增删改查）实现教程
qq_61465103的博客
09-20 294
jquery作品（增删改查）实现教程
jquery 实现前后端分离的增删改查
oooojjh的博客
09-18 174
姓名生日
jQuery实现增删改查（功能具体实现）
m0_75047254的博客
10-27 439
点击下载，不知道下载第几个的下载第一个即可，下载时，右键需要的jQuery，将他另存为到桌面，然后引用到文件中调用。使用 jQuery，您需要下载 jQuery 库，然后把它包含在希望使用的网页中。输入字符点击搜索，即可匹配显示，没有东西时点击搜索，可以查询全部。点击保存按钮，保存更改的信息，同时保存按钮消失，修改按钮显示。点击修改按钮，将tr的内容转化为input标签里面的内容。对于新添加的数据，我们对他的方法添加有两种方法。点击添加按钮 ，即可吧数据添加到table。同时修改按钮消失，保存按钮显示。
JQ 实现增删改查的思路
04-23
NULL 博文链接：https://onestopweb.iteye.com/blog/2342833
Jquery Ajax动态增删改查
10-10
Jquery Ajax动态增删改查，Jquery Ajax
ajax经典面试题;一个页面实现增删改查之jquery版
08-09
asp.net程序员面试经常遇到的问题，使用VS2008+JQuery1.3.1版实现。难倒了不少童鞋们。
jquery_table_ajax表头增删改查操作
06-30
1，ajax 从php获取数据（模拟数据）； 2，Jquery 操作 Table 的数据，主要是增删改查不显示在每一条数据的后面； 3，对修改操作使用了jquery.cookie.js ，并做了cookie最大值的判断，防止无效（其实不判断最大值也关系不大）； 4，页面需要自己美化； 5，如不在意表格每列最后一行进行删除/编辑操作，请勿下载。
C# jquery增删改查，带分页功能
08-24
用juqery实现数据的增删改查，无刷新，带分页功能。
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查
03-01
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查 适用于学习ssm框架 jQuery 和 Bootstrap的案例
jquery表格增删改查.rar
05-05
借助bootstrap框架完成的一个简单的jquery表格增删改查内容，适合学习。借助bootstrap框架完成的一个简单的jquery表格增删改查内容，适合学习。
ajax .net jquery 增删改查 ajax模糊查询
06-14
用的是.net三层，连接语句在DBHelper里面自行修改 实现了简易的增删改查 和ajax模糊查询 数据库是sql2000的 在DB里面 希望可以帮到刚接触ajax的人
infrared-remote-candroid studiodemo
最新发布
05-05
android studio下载
增删改查jquery
09-01
对于增删改查操作，jQuery 提供了一些方便的方法和函数。以下是一些常见的用法： 1. 增加元素： - 使用 `.append()` 方法在指定元素内部添加内容。 - 使用 `.prepend()` 方法在指定元素内部前置内容。 - 使用 `....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值