购物车

function add(items) {
  let frag = document.createDocumentFragment()
  for (let item of items) {
    let tr = document.createElement('tr')
    tr.innerHTML = `
        <td>${item.name}</td>
        <td>${item.price.toFixed(2)}</td>
        <td><a href="javascript:void(0);">删除</a>
        </td>`
    frag.appendChild(tr)
  }
  document.querySelector('tbody').appendChild(frag)
  bind()
}

function bind() {
  let tbody = document.getElementsByTagName('tbody')[0]
  let allTr = [].slice.call(tbody.getElementsByTagName('tr'), 0)
  let totalNode = document.querySelector('tfoot td')
  let total = 0
  for (let trNode of allTr) {
    let price = +trNode.children[1].innerText
    total += price
    if (!trNode.onclick) {
      trNode.onclick = handleDelete
    }
  }
  total = total.toFixed(2)
  totalNode.innerText = `${total}(${allTr.length}件商品)`
}
function handleDelete(e) {
  if (e.target.tagName == 'A') {
    this.remove()
    bind()
  }
}

function add(items) {
    const tbody = document.querySelector('#jsTrolley > tbody')
    items.forEach(item => {
        const { name, price } = item
        const tr = document.createElement('tr')
        tr.innerHTML = `<td>${name}</td><td>${price.toFixed(2)}</td><td><a href="javascript:void(0);">删除</a></td>`
        tbody.append(tr)
    })
    calcTotalPrice()
}
function calcTotalPrice() {
    const tdPriceAll = document.querySelectorAll('#jsTrolley > tbody > tr > td:nth-child(2)')
    let newSumPrice = 0
    tdPriceAll.forEach(item => {
        newSumPrice += +item.innerText
    })
    document.querySelector('#jsTrolley > tfoot > tr > td').innerText = `${newSumPrice.toFixed(2)}(${tdPriceAll.length}件商品)`
}
function bind() {
    const tbody = document.querySelector('#jsTrolley > tbody')
    tbody.onclick = (e) => {
        if (e.target.tagName === 'A' && e.target.innerText === '删除') {
            e.target.parentElement.parentElement.remove()
            calcTotalPrice()
        }
    }
}

function add(items) {
    //创建空白的文档片段
  let frag = document.createDocumentFragment();
  for (let item of items) {
    //创建一个新的tr
    let tr = document.createElement('tr');
    //填充tr元素内容
    tr.innerHTML = `
        <td>${item.name}</td>
        <td>${item.price.toFixed(2)}</td>
        <td><a href="javascript:void(0);">删除</a>
        </td>`;
        //tr填充到文档片段里
    frag.appendChild(tr);
  }
  //文档片段添加到DOM树中
  document.querySelector('tbody').appendChild(frag);
  bind();
}
 
function bind() {
    //获取tbody
  let tbody = document.getElementsByTagName('tbody')[0];
  //获取tbody里面的tr元素数组
//   let trs =tbody.getElementsByTagName('tr');这个返回值是一个伪数组，会报错
  let trs=[].slice.call(tbody.getElementsByTagName('tr'),0)
  //变为数组
    //结尾节点
  let FootNode = document.querySelector('tfoot td');
  //总价
  let total = 0
  //遍历tr元素
  for (let tr of trs) {
    let price = +tr.children[1].innerText
    total += price
    if (!tr.onclick) {
      tr.onclick = function(e){
            if (e.target.tagName == 'A') {
            this.remove()
            bind()
        }
}
    }
  }
  total = total.toFixed(2)
  FootNode.innerText = `${total}(${trs.length}件商品)`
}

function add(items) {
    let tbody = document.querySelector('tbody')
    items.forEach(el => {
        tbody.innerHTML += `<tr>
                                <td>${el.name}</td>
                                <td>${el.price.toFixed(2)}</td>
                                <td><a href="javascript:void(0);">删除</a></td>
                            </tr>`
    })
    bind()
    show()
}

function bind() {
    let as = document.querySelectorAll('a')
    as.forEach(el => {
        el.onclick = function() {
            el.parentElement.parentElement.remove()
            show()
        }
    })
}
 function show () {
     let tbody = document.querySelector('tbody')
     let tfoot = document.querySelector('tfoot')
     let trs = tbody.querySelectorAll('tr')
     let total = 0
     trs.forEach(tr => {
         total += parseFloat(tr.children[1].innerHTML)
     })
     tfoot.querySelector('td').innerHTML = `${total.toFixed(2)}(${trs.length}件商品)`
 }
bind()

🐤

    function add(items) {
        let table = document.getElementById('jsTrolley')
        let body = table.getElementsByTagName('tbody')
        items.forEach(item => {
            let tr = document.createElement('tr')
            tr.innerHTML = `<td>${item.name}</td><td>${item.price.toFixed(2)}</td><td><a href="javascript:void(0);">删除</a></td>`
            body.item(0).appendChild(tr)
        })
        bind()
        refreshTotal()
    }

    function bind() {
        let table = document.getElementById('jsTrolley')
        let body = table.getElementsByTagName('tbody')
        let trs = body.item(0).getElementsByTagName('tr')
        for (let i = 0; i < trs.length; i++)
            trs.item(i).getElementsByTagName('td').item(2).getElementsByTagName('a').item(0).onclick = function (e) {
                e.target.parentElement.parentElement.remove()
                refreshTotal()
            }

    }

    function refreshTotal(){
        let table = document.getElementById('jsTrolley')
        let body = table.getElementsByTagName('tbody')
        let bodyList = body.item(0).getElementsByTagName('tr')

        let foot = table.getElementsByTagName('tfoot')
        let td = foot.item(0).getElementsByTagName('tr').item(0).getElementsByTagName('td')

        let sum = 0
        for (let i = 0; i < bodyList.length; i++)
            sum += +bodyList.item(i).getElementsByTagName('td').item(1).innerText

        td.item(0).innerText = `${sum.toFixed(2)}(${bodyList.length}件商品)`
    }

<!-- HTML模块为一个简化版的购物车，tbody为商品列表，tfoot为统计信息，系统会随机在列表中生成一些初始商品信息
1、请完成add函数，在列表后面显示items商品信息。参数items为{name: String, price: Number}组成的数组
2、请完成bind函数，点击每一行的删除按钮(包括通过add增加的行)，从列表中删除对应行
3、请注意同步更新统计信息，价格保留小数点后两位
4、列表和统计信息格式请与HTML示例保持一致
5、不要直接手动修改HTML中的代码
6、不要使用第三方库 -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        /* 填写样式 */
        body,
        html {
            padding: 0;
            margin: 0;
            font-size: 14px;
            color: #000000;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            table-layout: fixed;
        }

        thead {
            background: #3d444c;
            color: #ffffff;
        }

        td,
        th {
            border: 1px solid #e1e1e1;
            padding: 0;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
    </style>
</head>

<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">
        // 填写JavaScript
        let tableArr = []
        function add(items) {
            // console.log(document.querySelectorAll('tbody tr'));
            // 添加节点
            if (items) {
                for (let i = 0; i < items.length; i++) {
                    const tr = document.createElement('tr')
                    tr.innerHTML = `<td>${items[i].name}</td>
                    <td>${items[i].price.toFixed(2)}</td>
                    <td "><a href="javascript:void(0);">删除</a></td>`
                    document.querySelector('tbody').appendChild(tr)
                }
            }
            // 给新元素也添加还是删除功能
            Array.from((document.querySelectorAll('tbody a'))).forEach(item => {
                item.onclick = bind()
            });
            sum()
        }

        function bind() {
            return function (e) {
                // const deleteArr = Array.from(document.querySelectorAll('tbody tr td:nth-child(3) a'))
                console.log(e.target);
                e.target.parentNode.parentNode.parentNode.removeChild(e.target.parentNode.parentNode)
                sum()
            }
        }

        function sum() {
            // 重渲染总计
            let priceArr = Array.from(document.querySelectorAll('tbody tr td:nth-child(2)'))
            let sum = 0
            let num = 0
            priceArr.forEach(item => {
                sum += (+item.innerHTML)
            })
            num = priceArr.length
            document.querySelector('tfoot td').innerHTML = `${sum.toFixed(2)}(${num}件商品)`
        }

        Array.from((document.querySelectorAll('tbody a'))).forEach(item => {
            item.addEventListener('click', bind)
        });

    </script>
</body>

</html>

测试通过了

function add(items) {
  const tBody = document.getElementByTagName('tbody')[0];
  const sumTd = document.querySelector('tfoot td');
    let fragment = document.createDocumentFragment();
    let totalPrice = parseFloat(sumTd.innerHTML); 
    items.forEach(curr => {
      let price = Number(Number(curr?.price).toFixed(2));
      totalPrice += price; 
      let vDom = document.createElement('tr');
      vDom.innerHTML = `<td>${curr?.name}</td><td>${price}</td><td><a href="javascript:void(0);">删除</a></td>`
      fragment.append(vDom);
    }) 
    tBody.append(fragment);
    console.log(typeof totalPrice)
    sumTd.innerHTML = `${totalPrice.toFixed(2)}(${tBody.children.length}件商品)`; 
}
function bind() {
    const tBody = document.querySelector('tbody');
     tBody.addEventListener('click', function(e){
    if(e.target.tagName.toLowerCase() === 'a') {
    let tarTr = e.target.parentNode.parentNode;
    let price = tarTr.querySelector(':nth-of-type(2)').innerText; 
    tarTr.remove();  // 删除了dom, 已经获取不到了
    let sumNum = this.children.length;   
    let totalprice = (parseFloat(sumTd.innerHTML) - price).toFixed(2);  
    sumTd.innerText = `${totalprice}(${sumNum}件商品)`; 
    }
 }, false);
}

本地是可以运行的，预计问题是查询dom用了querySelector , 题目中想让使用dom.getElementByTagName 获得类数组。
考察： 
1. 保留两位小数： num.toFixed(2); 返回两位小数的字符串
2. 创建节点： document.createElement(tagName); 
3. 删除节点：dom.removeChild(childNode); dom.remove(); 
***委派：通过e.target确定目标对象