购物车2.0使用模板字符串数组遍历

//商品列表数组
let productList = [{
   
        id: 1001,
        name: 'js高级编程',
        url: './image/shoppingBg_03.jpg',
        price: 35.89,
        num: 0,
        singlePrice: 0,
        state:false  //是否选状态，true选中,false未选中
    },
    {
   
        id: 1002,
        name: 'css高级编程',
        url: './image/shoppingBg_06.jpg',
        price: 25.89,
        num: 0,
        singlePrice: 0,
        state:false  
    }
]
let stateAll = false //是否全选状态，true选中,false未选中

const tableEle = document.querySelector('table')
const totalPriceEle = document.querySelector('.total-price')
/**
 * 显示商品列表数据
 *   遍历商品列表数据,动态生成商品项html元素 
 *   生成的商品项html元素 做内容赋值给 table 显现
 */
function showProductList() {
   
    let str = ` <tr>
                    <th>序号</th>
                    <th>商品图片</th>
                    <th>商品信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th width="100px">总价</th>
                    <th>操作</th>
                </tr>`

    let trArr = productList.map(function (item, index) {
   
        return ` <tr>
                    <td>${
    item.id}</td>
                    <td><img src="${item.url}" alt=""></td>
                    <td>${
    item.name}</td>
                    <td>￥${
    item.price}</td>
                    <td><input type="button" name="minus" value="-" ${
    item.num<=0?'disabled':''} ><input type="text" name="amount"
                            value="${item.num}"><input type="button" name="plus" value="+"></td>
                    <td>￥${
    item.singlePrice}</td>
                    <td>
                        <a href="#">移入收藏</a><