简单的事件委托可勾选编辑的js购物车

最新推荐文章于 2022-06-09 14:37:46 发布
最新推荐文章于 2022-06-09 14:37:46 发布
阅读量718 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/orange_cccc/article/details/84840408
版权 
*{ margin:0; padding:0; font-size:14px}
#box{ width:500px; margin:100px auto}
table,th,td{ border:1px solid #000; border-collapse:collapse}
td,th{ width:100px; height:30px; padding:10px}
input[type="text"]{ display:none; height:24px; width:60px; border:1px solid #ccc;}
tbody tr td:first-child{text-align: center;}
tfoot td{text-align: right;}
.editBtn{ color:#666}
.delBtn{ color:red}
.okBtn,.cancelBtn{ display:none}

.edit span{ display:none}
.edit input[type="text"]{ display:inline-block}
.edit .editBtn,.edit .delBtn{ display:none}
.edit .okBtn,.edit .cancelBtn{ display:inline}

<body>
<div id="box">
	<table>
		<thead>
			<tr>
	            <th><label>全选：<input type="checkbox" id="allCheck"/></label></th>
	            <th>名称</th>
	            <th>单价</th>
	            <th>数量</th>
	            <th>编辑</th>
	        </tr>
		</thead>
        <tbody>
	        <tr>
	        	<td><input type="checkbox" class="check"/></td>
	            <td><span>张三</span><input type="text"></td>
	            <td><span>18</span><input type="text"></td>
	            <td><span>1</span><input type="text"></td>
	            <td>
	            	<a href="javascript:;" class="editBtn">编辑</a>
	            	<a href="javascript:;" class="okBtn">确定</a>
	            	<a href="javascript:;" class="cancelBtn">取消</a>
	            	<a href="javascript:;" class="delBtn">删除</a>
	            </td>
	
	        </tr>
	        <tr>
	        	<td><input type="checkbox" class="check"/></td>
	            <td><span>李四</span><input type="text"></td>
	            <td><span>25</span><input type="text"></td>
	            <td><span>2</span><input type="text"></td>
	            <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
	
	        </tr>
	        <tr>
	        	<td><input type="checkbox" class="check"/></td>
	            <td><span>小强</span><input type="text"></td>
	            <td><span>22</span><input type="text"></td>
	            <td><span>3</span><input type="text"></td>
	            <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
	
	        </tr>
	        <tr>
	        	<td><input type="checkbox" class="check"/></td>
	            <td><span>小明</span><input type="text"></td>
	            <td><span>16</span><input type="text"></td>
	            <td><span>4</span><input type="text"></td>
	            <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
	
	        </tr>
        </tbody>
        <tfoot>
        	<tr>
        		<td colspan="5">总价：￥<b id="money"></b></td>
        	</tr>
        </tfoot>
   </table>
</div>
<script src="tools.js"></script>
<script>
	var box = tools.$("#box");
	var	table = tools.$("table",box)[0];
	var tbody = tools.$("tbody", box)[0];
	var allCheck = tools.$("#allCheck");
	var n = 0; // 记录单选按钮被选中的数量
	
	table.onclick = function(e){
		e = e || event;
		//找到事件源
		var target = e.target || e.srcElement;
		//找到当前tr
		var tr = target.parentNode.parentNode;
		//判断事件源
		if(target.className === "editBtn"){
			//编辑按钮
			//切换span和input得显示隐藏
			tr.className = "edit";
			//找到当前行所有span，把span得内容给到对应的input.value
			var aSpan = tools.$("span", tr);
			for(var i = 0; i < aSpan.length; i++){
				aSpan[i].nextElementSibling.value = aSpan[i].innerHTML;
			}
		}else if(target.className === "okBtn"){
			//确定按钮
			tr.className = "";
			var aSpan = tools.$("span", tr);
			for(var i = 0; i < aSpan.length; i++){
				aSpan[i].innerHTML = aSpan[i].nextElementSibling.value;
			}
			calcPrice();
		}else if(target.className === "cancelBtn"){
			//取消
			tr.className = "";
		}else if(target.className === "delBtn"){
			if(confirm("你真的不买我了吗？")){	
				tr.parentNode.removeChild(tr);
				//判断当前一行是否被选中
				var check = tools.$(".check", tr)[0];
				//如果被选中，n减一
				if(check.checked) n--;
				//判断n跟aCheck的length的关系
				allCheck.checked = (n===tools.$(".check", box).length);
				calcPrice();
			}
		}else if(target.id === "allCheck"){
			//全选
			//找到所有的单选
			var aCheck = tools.$(".check", box);
			for(var i = 0; i < aCheck.length; i++){
				//单选得状态跟全选同步
				aCheck[i].checked = target.checked;
			}
			//n得值也要修改
			n = target.checked ? aCheck.length : 0;
			calcPrice();
		}else if(target.className === "check"){
			target.checked ? n++ : n--;
			var aCheck = tools.$(".check", box);
			allCheck.checked = n === aCheck.length;
			calcPrice();
		}
	}
		
	function calcPrice(){
		var sum = 0;
		//找到被选中的那些行，然后把这些行的单价X数量，累加
		var aTr = tools.$("tr", tbody);
		for(var j = 0; j < aTr.length; j++){
			if(tools.$(".check", aTr[j])[0].checked){
				var price = Number(tools.$("span", aTr[j])[1].innerHTML);
				var num = Number(tools.$("span", aTr[j])[2].innerHTML);
				sum += price*num;
			}
		}
		tools.$("#money").innerHTML = sum + "元";
	}
		
	
</script>
</body>

tool.js

var tools = {
	/* 查找DOM对象
	 * @param selector string css基本选择器
	 * @param [parent] DOMobj 父级元素对象
	 * @return   DOMobj || HTMLCollection
	 */
	$: function(selector ,parent){
		parent = parent || document;
		switch(selector.charAt(0)){
			case "#":
				return document.getElementById(selector.slice(1));
			case ".":
				return parent.getElementsByClassName(selector.slice(1));
			default:
				return parent.getElementsByTagName(selector);
		}
	},
	
	/*获取外部样式
	 * @param obj  DOMobj 要获取属性的DOM对象 
	 * @param attr string 获取某一条属性的属性名
	 * @return  string  obj的attr属性值
	 */
	getStyle: function(obj, attr){
		if(obj.currentStyle){ //针对IE
			return obj.currentStyle[attr];
		}else{
			return getComputedStyle(obj,false)[attr];
		}
	},
	
	/* 获取body宽高
	 * 
	 * @return obj {width,height}
	 * */
	getBody: function(){
		return {
			width: document.documentElement.clientWidth || document.body.clientWidth,
			height: document.documentElement.clientHeight || document.body.clientHeight
		};
	},
	
	/*让元素在body里绝对居中
	 * @param obj  DOMobj 居中的那个元素对象
	 */
	
	showCenter: function(obj){
		
		//console.log(this);
		//this在不同执行环境指向的对象是不一样的，所以用一个变量在指向变化之前先存下来
		var _this = this;
		
		//obj相对于body定位
		document.body.appendChild(obj);
		obj.style.position = "absolute";
		
		function center(){
			//console.log(_this);
			var _left = (_this.getBody().width - obj.offsetWidth)/2,
				_top = (_this.getBody().height - obj.offsetHeight)/2;
			obj.style.left = _left + "px";
			obj.style.top = _top + "px";
		}
		
		center();
		window.onresize = center;
		
	},
	/* 设置样式
	 * @param obj DOMobj 设置谁的样式
	 * @param oAttr obj  {left:"200px",top:"100px"}
	 * */
	css: function(obj,oAttr){
		
	}
	
	//tools.css(div,{left:"200px",width:"100px"});
}
orange_cccc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js-购物车案例（一）整体思路和实施步骤
qq_25503949的博客
04-29 1472
原生js-购物车案例（一）整体思路和实施步骤 在准备写购物车之前补充一个小小的知识点（有关table的一个api）： <body> <table id="tab"> <tbody> <tr> <td>333</td> &...
购物车实现逻辑
热门推荐
Preserve
12-25 1万+
购物车页面如下： 购物车表cart_line主要存储了如下的几个字段(还包括一些其它的字段)  id count ：产品的数量 product_product_id ：产品id product_hot_item_id : res_partner_id：用户id 1.  点击加入购物车时，向后台发请求，后台根据前台传递的参数从数据库对应的表中读取相应的信息，然后 插入到ca
JS 事件绑定、事件监听、事件委托详细介绍
10-21
主要介绍了JS 事件绑定、事件监听、事件委托详细介绍的相关资料,需要的朋友可以参考下
js事件委托之复选框全选
Weiyl的博客
07-03 308
js事件委托之复选框全选 $("#qx").click(function () { $("input[name=xz]").prop("checked", this.checked); }) $("#tBody").on("click", "input[name=xz]", function () { $("#qx").prop("checked", $("input[name=xz]:checked").length == $("input[name=xz]").length); })
购物车实现勾选框选中再传递值(超简单版)
qq_41839784的博客
04-21 2622
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="checkbox" value="0" name="test...
1.商城购物车的逻辑与实现
weixin_51614564的博客
06-09 2553
思路：1.首先我们需要在onLoad 里面获取购物车的数据2.根据购物车中的商品数据，所有的商品都会被选中 checked=true 全选就会被选中3.计算全选：当购物车的商品都选中了，全选就会被选中，只要有一个商品没被选中，全选按钮就不会被选中实现步骤：1.首先我们需要在data里面定义好数据 2.因为在后端给我们返回的数据是没有是否选中的属性，这时我们需要手动给处理数据添加属性3.计算商品的全选的时候计算总价格（1）把需要的商品选中，我们才拿他来计算(2)获取购物车数据（3）遍历（4）判断商品是否被
纯JS实现前端购物车案例.rar
04-08
购物车案例功能介绍：1、添加购物车，清单库存数量会对应减少，库存不足会警告；2、从购物车删除，库存将返回清单，总价相应变化；3、点击"-"，数量会返回到清单库存；4、点击"+"，清单中库存会减少，库存不足会警告...
微信小程序批量编辑(购物车也适用)
04-09
在批量编辑购物车的场景下，我们可以创建一个名为`datalist`的数据列表，这个列表通常包含了每个商品的信息，如商品ID、名称、单价、数量等。用户可以通过勾选复选框来选择需要批量操作的商品，这些状态的变化会实时...
Vue中Table组件Select的勾选和取消勾选事件详解
10-17
主要为大家详细介绍了Vue中Table组件Select的勾选和取消勾选事件详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS实现即点即编辑功能代码
10-30
实现"即点即编辑"功能需要对HTML结构、CSS样式和JavaScript事件处理有深入的理解。在实际项目中，我们还应该考虑浏览器兼容性、安全性（防止XSS攻击）以及性能优化等问题。总的来说，虽然这个功能看似简单，但实现时...
checkbox选中触发事件_DOM 事件相关
weixin_39536630的博客
11-28 253
什么是事件委托？事件委托：不监听元素 C 自身，而是监听其祖先元素 P，然后判断 e.target 是不是该元素 C（或该元素的子元素）如果我们有许多类似的方式要处理元素,那么就不必为每个元素分配一个处理程序 —— 而是将单个处理程序放在它们的共同祖先上 => 即监听祖先元素优点: 1. 省内存 2. 可以监听动态元素怎么阻止默认动作？e.preventDefault() 或者 return...
前端实现购物车js代码
BoomMan
03-07 8796
function Goods(goodsId, goodsNum, goodsStatus) { // 0.正常可下单 1.缺货 2.不存在 this.goodsId = goodsId; Goods.prototype.goodsNum = 0; if( typeof goodsNum ==="undefined")...
js事件实现购物车
Pwsifeng的博客
02-14 525
微信：xujie766(学习资源，资料视频) js事件实现简易购物车 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-
原生javascript全选小功能（事件委托）
qq_48445738的博客
09-19 238
怎么才算全选？ 无非就是当前也面的所有数据都被勾选了 因此我们需要给每个复选框都添加事件 或者使用事件代理 现有这样的页面 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
购物车ListView中CheckBox的逻辑处理
zhaowei_zhang的博客
12-18 1607
最近在做一个项目，在做购物车的时候研究适配器内的CheckBox点击后Activity的数据更新，经过网上查找资料后问题解决，当然，也得感谢一下群里的大神提供了思路。 列表中的CheckBox选中状态与一个Map进行绑定，利用 adapter.notifyDataSetChanged();来更新界面。 至于当点击item中的CheckBox时，则调用了自定义的监听器来修改数据 Act
datagridcheckbox 勾选事件
最新发布
08-19
根据提供的引用内容，datagridcheckbox的勾选事件可以通过在代码中添加相应的事件处理程序来实现。具体实现方法可能因不同的开发环境和技术而有所不同。在引用中的代码示例中，可以看到在checkbox的formatter函数中添加了一个判断语句，根据数据中的checked字段来确定是否勾选checkbox。 在示例代码中，可以看到在formatter函数中，如果数据行的checked字段为true，则返回一个勾选的checkbox，否则返回一个未勾选的checkbox。这意味着当checkbox被勾选时，可以通过检查该行数据中的checked字段来确定。 因此，在代码中可以通过监听checkbox的点击事件来实现勾选事件的处理。当checkbox被点击时，可以获取到该行数据，然后可以处理相应的逻辑。 请注意，代码示例中使用的是jQuery的datagrid插件，在不同的开发环境和技术中，可能会有不同的实现方式。具体实现方法可能需要根据所使用的开发环境和技术进行适当调整。 综上所述，datagridcheckbox的勾选事件可以通过在代码中添加相应的事件处理程序来实现，具体实现方法可能因不同的开发环境和技术而有所不同。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [jQuery EasyUI DataGrid Checkbox数据设定与取值](https://blog.csdn.net/sun5769675/article/details/45171627)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [自定义用户控件，根据数据字段改变Grid行背景色](https://download.csdn.net/download/lcforcom/9270593)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值