思路: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位。