var cartTable = document.getElementById('cartTable'); var tr = cartTable.children[1].rows;//获取table下的tbody下的每一行 var checkInputs = document.getElementsByClassName('check'); var checkAllInputs = document.getElementsByClassName('check-all'); var selectedTotal = document.getElementById('selectedTotal'); var priceTotal = document.getElementById('priceTotal'); //计算总数和价格 function getTotal(){ var selected = 0; var price = 0; for(var i=0;i < tr.length; i++){ if(tr[i].getElementsByTagName('input')[0].checked){ selected += parseInt(tr[i].getElementsByTagName('input')[1].value); price += parseFloat(tr[i].cells[4].innerHTML);//cells属性为获得tr下面的td } } selectedTotal.innerHTML = selected; priceTotal.innerHTML = price.toFixed(2);//保留两位小数 } for(var i=0;i<checkInputs.length;i++){ checkInputs[i].onclick = function(){ if(this.className === 'check-all check'){//如果点击的是全选按钮，则使所有按钮的状态和它相同 for(var j=0;j<checkInputs.length;j++){ checkInputs[j].checked = this.checked; } } if(this.checked == false){//如果其中一个变为未选中状态，则使全选按钮取消选中 for(var i=0;i<checkAllInputs.length;i++){ checkAllInputs[i].checked = false; } } getTotal(); } }
2)点击已选商品实现商品预览浮层的功能
点击已选商品时会显示出已选择商品的列表
同时在getTotal()函数中增加新创建的div
js代码：
function getTotal(){ var selected = 0; var price = 0; var HTMLstr = ''; for(var i=0;i < tr.length; i++){ if(tr[i].getElementsByTagName('input')[0].checked){ tr[i].className = 'on'; selected += parseInt(tr[i].getElementsByTagName('input')[1].value); price += parseFloat(tr[i].cells[4].innerHTML);//cells属性为获得tr下面的td HTMLstr += '<div><img src="'+ tr[i].getElementsByTagName('img')[0].src + '"><span>取消选择</span></div>'; } else{ tr[i].className = ''; } } selectedTotal.innerHTML = selected; priceTotal.innerHTML = price.toFixed(2);//保留两位小数 selectedViewList.innerHTML = HTMLstr; if(selected == 0){ foot.className = 'foot'; } } for(var i=0;i<checkInputs.length;i++){ checkInputs[i].onclick = function(){ if(this.className === 'check-all check'){//如果点击的是全选按钮，则使所有按钮的状态和它相同 for(var j=0;j<checkInputs.length;j++){ checkInputs[j].checked = this.checked; } } if(this.checked == false){//如果其中一个变为未选中状态，则使全选按钮取消选中 for(var i=0;i<checkAllInputs.length;i++){ checkAllInputs[i].checked = false; } } getTotal(); } } selected.onclick = function(){ if(foot.className == 'foot'){ if(selectedTotal.innerHTML != 0){ foot.className = 'foot show'; } }else{ foot.className = 'foot'; } }
3)商品列表中的取消选择与事件代理
已选商品列表中没有appendChild的时候div和span都不存在，所以要使用事件代理。