思路:add方法的思路是,将items中的元素映射为html内容并添加在tbody尾部,最后再调用getAmount函数更新商品总金额和总数量即可。bind方法的思路是,使用父元素监听,即使用tbody监听click事件,再在内部判断是否是a标签点击事件,如果是则将a标签的父元素的父元素即tr标签删除,再调用getAmount函数更新商品总金额和总数量即可。getAmount方法的思路是,分别获取tbody中的所有tr标签以及tfoot中的td标签,然后累加tr标签中的金额数量,最后将对应信息拼接赋值给td标签内部即可。
<body> <table id="jsTrolley"> <thead><tr><th>名称</th><th>价格</th><th>操作</th></tr></thead> <tbody> <tr><td>产品1</td><td>10.00</td><td><a href="javascript:void(0);">删除</a></td></tr> <tr><td>产品2</td><td>30.20</td><td><a href="javascript:void(0);">删除</a></td></tr> <tr><td>产品3</td><td>20.50</td><td><a href="javascript:void(0);">删除</a></td></tr> </tbody> <tfoot><tr><th>总计</th><td colspan="2">60.70(3件商品)</td></tr></tfoot> </table> <script type="text/javascript"> function add(items) { let tbody=document.getElementsByTagName('tbody')[0] let content='' items.forEach(item=>{ content+=`<tr><td>${item.name}</td><td>${item.price.toFixed(2)}</td><td><a href="javascript:void(0);">删除</a></td></tr>` }) tbody.innerHTML+=content this.getAmount() } //利用父元素监听 function bind() { let that=this let tbody=document.getElementsByTagName('tbody')[0] tbody.addEventListener('click',function(e){ if(e.target.nodeName==='A') { e.target.parentElement.parentElement.remove() that.getAmount() } }) } function getAmount() { let tbody=document.getElementsByTagName('tbody')[0] let all=tbody.getElementsByTagName('tr') let tfoot=document.getElementsByTagName('tfoot')[0] let amount=tfoot.getElementsByTagName('tr')[0].getElementsByTagName('td')[0] let res=Array.from(all).reduce((tmp,item)=>{ return tmp+Number(item.children[1].innerHTML) },0) amount.innerHTML = `${res.toFixed(2)}(${all.length}件商品)` } this.bind() </script>
总结:getElementsByTagName获取对应标签元素,注意该函数写法并且注意该函数返回值是一个伪数组,其有length属性,但是如果要使用其他的数组方法则需要使用Array.from()来将该伪数组转换为真正的数组。使用方法el.addEventListener('click',function(e){})来为元素el绑定事件,其中e指的是事件对象的参数,e.target指的是事件的目标对象,nodeName属性指的是节点的名字,注意节点名字是大写,parentElement属性指的是当前元素的父级元素(注意parentElement是元素对象,而parentNode是节点对象,包括元素节点、文本节点、注释节点等),children是子节点元素数组。node.remove()是移除该节点本身,node.removeChild(child)是移除该节点的孩子节点。reduce用于对数组中的每个元素进行归约操作,将数组归约成单个值,其第一个参数是一个回调函数callback,它接受四个参数:累加器、当前元素、当前索引和原始数组,其第二个参数是累加器初始值。字面量创建方法Number(n),不管n是数字还是字符串,均是将其变为数字n。Array.from(all)将类数组转换为数组。方法n.toFixed(len)将数值n的小数位数保留len位。