简易购物车

css部分

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 900px;
            margin: 30px auto;
        }
        table {
            border-collapse: collapse;
            width: 900px;
            /*background: #eee;*/
            margin: 30px auto;
            font-size: 12px;
        }
        table tr {
            border: 1px solid #ddd;
        }
        table tr:first-child{
            font-weight:bold;
        }
        table td {
            padding: 10px 0;
        }
        table img {
            vertical-align: text-top;
            width: 80px;
        }
        table .name {
            margin-left: 10px;
        }
        table tr td:first-child {
            text-align: center;
        }
        table a {
            text-decoration: none;
            display: inline-block;
            width: 15px;
            height: 17px;
            color: #444;
            text-align: center;
            border: 1px solid #e5e5e5;
            background: #f0f0f0;
        }
        table .num {
            width: 39px;
            height: 17px;
            border: 1px solid #bbb;
            text-align: center;
        }
        .total {
            position: fixed;
            width: 900px;
            height: 60px;
            bottom: 0;
            background: #eee;
            font-size: 14px;
            left: 50%;
            transform: translateX(-50%);
        }
        .total div {
            display: inline-block;
            line-height: 60px;
            height: 60px;
        }
        .total div:first-child {
            width: 70px;
            text-align: center;
        }

        .total div:nth-child(2) {
            width: 500px;
            text-align: right;
        }

        .total div:nth-child(3) {
            width: 196px;
            text-align: center;
        }
        .total div .btn {
            width: 120px;
            height: 60px;
            background: #bbb;
            color: #fff;
            border: none;
        }
        .total span, .money {
            color: red;
            font-weight: bold;
        }

        .price {
            font-weight: bold;
        }
	</style>

HTML

<div class="box">
	    <h3>我的购物车</h3>

	    <table id="cart">
	        <tr>
	            <td width="70px"><input type="checkbox" class="allSelect"> 全选</td>
	            <td width="520px">商品信息</td>
	            <td>单价</td>
	            <td>数量</td>
	            <td>金额</td>
	        </tr>
	    </table>
	</div>

	<div class="total">
	    <div><input type="checkbox" class="allSelect"> 全选</td></div>
	    <div>已选商品<span id="items-num">0</span>件</div>
	    <div>合计（不含运费）： <span id="price-sum">&yen;0.00</span></div>
	    <div><input type="button" id="calc" class="btn" value="结算"></div>
	</div>

js部分

<script type="text/javascript">
		var arr = [
        {
            name: "八度北欧台灯简约现代led卧室床头灯创意个性书房",
            price: 118,
            image: "image/deng2.jpg",
            num: 1
        },
        {
            name: "欧普 LED台灯护眼台灯学生书桌卧室床头灯学习阅读",
            price: 399,
            image: "image/deng3.jpg",
            num: 1
        },
        {
            name: "美的可充电式led小台灯护眼书桌大学生宿舍家用卧室",
            price: 233,
            image: "image/deng4.jpg",
            num: 1
        },
        {
            name: "欧式全铜台灯家用卧室床头灯简约客厅书房灯婚庆温暖",
            price: 399,
            image: "image/deng5.jpg",
            num: 1
        },
        {
            name: "飞利浦led台灯 儿童学习护眼灯寝室书桌大学生宿舍卧",
            price: 123,
            image: "image/deng6.jpg",
            num: 1
        }
    ];

    //创建table;
    var table=document.getElementById('cart');
    //复选框
    var singleCxs=document.getElementsByClassName('singleCx');
    //每行的总价钱数
    var moneys=document.getElementsByClassName('money');
    //结算总价
    var priceSum=document.getElementById('price-sum');
    var nums=document.getElementsByClassName('num');
   	var itemNum=document.getElementById('items-num');
   	//全选按钮
   	var allSelect=document.getElementsByClassName('allSelect');

    //创建内容
    function createrows() {
    	for(var i=0;i<arr.length;i++){
    		var tr=table.insertRow();//创建一行
    		for(var j=1;j<=5;j++){//5个td
    			var td=tr.insertCell();
    			if(j===1){
    				var singleCx=document.createElement('input');
    				singleCx.type='checkbox';
    				singleCx.className='singleCx';
    				td.appendChild(singleCx);
    			}else if(j===2){
    				var img=document.createElement('img');
    				img.src=arr[i].image;
    				td.appendChild(img);
    				var osp=document.createElement('span');
    				osp.className='name';
    				osp.innerHTML=arr[i].name;
    				td.appendChild(osp);
    			}else if(j===3){
    				var money=document.createElement('span');
    				money.className='price';
    				money.innerHTML='&yen;'+arr[i].price;
    				td.appendChild(money);
    			}else if(j===4){
    				var ominus=document.createElement('a');
    				ominus.href='#';
    				ominus.innerHTML='-';
    				ominus.onclick=function(e){
    					minus(this);
    					e.preventDefault();
    				}
    				var onum=document.createElement('input');
    				onum.type='text';
    				onum.className='num';
    				onum.value=arr[i].num;
    				onum.oninput=function(){
    					updateMoney(this);
    				}

    				var oplus=document.createElement('a');
    				oplus.href='#';
    				oplus.innerHTML='+';
    				oplus.onclick=function(e){
    					plus(this);
    					e.preventDefault();
    				}
    				td.appendChild(ominus);
    				td.appendChild(onum);
    				td.appendChild(oplus);
    			}else if(j===5){
    				var omoney=document.createElement('span');
    				omoney.className='money';
    				omoney.innerHTML='&yen;'+arr[i].price*arr[i].num;
    				td.appendChild(omoney);
    			}
    		}
    	}
    }

    //点击加号时触发事件
    function plus(obj){
    	//加号的上一个兄弟节点
    	var onum=obj.previousSibling;
    	onum.value=parseInt(onum.value)+1;//每次点击时input框的值加一再赋值给onum;
    	//获取单价   取当前节点的父级的上一个节点的第一个子节点的innerHTML(去掉人名币符号)
    	var price=parseFloat(onum.parentNode.previousSibling.children[0].innerHTML.substring(1));
    	//计算总价  当前对象的父级的下一个兄弟节点的子节点的innetHTML的 单价*数量
    	onum.parentNode.nextSibling.children[0].innerHTML='&yen;'+price*onum.value;
    	calc();//计算总价
    }

   //点击减号时触发事件
   function minus(obj){
   		//加号的下一个兄弟节点
    	var onum=obj.nextSibling;
    	if(onum.value>1){
    		onum.value=parseInt(onum.value)-1;
    	}
    	var price=parseFloat(onum.parentNode.previousSibling.children[0].innerHTML.substring(1));
	    onum.parentNode.nextSibling.children[0].innerHTML='&yen;'+price*onum.value;
	    calc();//计算总价
   }

   //输入框
   function updateMoney(obj){
   		var onum=obj.value;
   		//输入框里只能是数字，去掉输入的空格之后不能是空
   		if(!isNaN(onum) && onum.trim()!=''){
   			if(onum>=1){//大于等于1  (至少为一件)
   				onum=parseInt(onum);
	   			var price=parseFloat(obj.parentNode.previousSibling.children[0].innerHTML.substring(1));
	   			obj.parentNode.nextSibling.children[0].innerHTML='&yen;'+onum*price;
	   			calc();//计算总价
   			}
   		}	
   }
   
   //计算总价 复选框沟中之后才计算总和。 还有总件数
   function calc(){
   		var sum=0;//总价
   		var n=0;//数量
   		for(var i=0;i<singleCxs.length;i++){
   			if(singleCxs[i].checked){//计算总价和总数量的前提是， 每条记录的复选框被沟中
   				sum+=parseFloat(moneys[i].innerHTML.substring(1));
   				n+=parseInt(nums[i].value)
   			}
   		}
   		priceSum.innerHTML='&yen;'+sum;
   		itemNum.innerHTML=n;
   }


   allSelect[0].onclick=function(){
   		allSelect[1].checked=this.checked;
   		updateSinglecxs(this.checked);
   		calc();//计算总价
   }
   
   allSelect[1].onclick=function(){
   		allSelect[0].checked=this.checked;
   		updateSinglecxs(this.checked);
   		calc();//计算总价
   }
   
   //点击全选按钮的时候 每行复选框做的事
   function updateSinglecxs(status){
   		for(var i=0;i<singleCxs.length;i++){
   			singleCxs[i].checked=status;//把全选按钮的状态给每行的复选框
   		}
   }
   createrows();

   //给每个行的复选框添加点击事件  每次点击都计算总价钱
   for(var i=0;i<singleCxs.length;i++){
	   	singleCxs[i].onclick=function(){
           		 //判断每个checkbox的状态
	   		for(var j=0;j<singleCxs.length;j++){
	   			if(!singleCxs[j].checked){//只要有一个不选中则跳出循环
	   				break;
	   			}
	   		}
	   		if(j===singleCxs.length){ //j的值和总长度相等 则说明都是选中状态
	   			allSelect[0].checked=true;
	   			allSelect[1].checked=true;
	   		}else{
	   			allSelect[0].checked=false;
	   			allSelect[1].checked=false;
	   		}
            calc();//计算总价
	   	}
   }	
   
	</script>

运行结果

每条记录的格式

心得：
把整体拆分成一部分一部分的功能。一步一步的来实现。