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

*{ 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}

	

		

			

	            
全选：
	            
名称
	            
单价
	            
数量
	            
编辑
	        
		
        

	        

	        	

	            
张三
	            
18
	            
1
	            

	            	编辑
	            	确定
	            	取消
	            	删除
	            
	
	        
	        

	        	

	            
李四
	            
25
	            
2
	            
编辑确定 取消删除
	
	        
	        

	        	

	            
小强
	            
22
	            
3
	            
编辑确定 取消删除
	
	        
	        

	        	

	            
小明
	            
16
	            
4
	            
编辑确定 取消删除
	
	        
        
        

        	

        		
总价：￥
        	
        
   

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"});
}