The previous section related the design of the shopping cart page

This section implements various functions of the shopping cart through JavaScript code.

Idea:
Step one: After the page is loaded, dynamically generate a table (shopping cart list) based on local data
Get the node object to be operated
Determine whether there is data in the shopping cart?
Yes: Display the shopping list
No: Prompt that the shopping cart is empty

Step 2: When the shopping cart list is dynamically generated, obtain all checkeBox label node objects in the tbody and see which one is If selected, the subtotal of the corresponding row will be obtained for total price calculation.
Step 3: Add an onchange event for each checkbox and change the total price based on the operation
Step 4: Select all
Step 5: Add a mouse click event for the add and subtract buttons to change the product Number

Step 6: Delete
Get all delete buttons
Add a mouse click event for the delete button
Delete the current row and update local data

<script>
var listObj = getAllData();
var table = document.getElementById("table")
var box = document.getElementById("box")
var tbody = document.getElementById("tbody");
var totalPrice = document.getElementById("totalPrice");
var allCheck = document.getElementById("allCheck");

if(listObj.length == 0) { //購物車為空
  box.className = "box";
  table.className = "hide";
} else {
  box.className = "box hide";
  table.className = "";
  for(var i = 0, len = listObj.length; i < len; i++) {
    var tr = document.createElement("tr"); //createElement() 方法通過指定名稱創(chuàng)建一個元素
    tr.setAttribute("pid", listObj[i].pid);
    //setAttribute() 方法創(chuàng)建或改變某個新屬性。如果指定屬性已經(jīng)存在,則只設(shè)置該值。
    //{"pid":值,"pImg":值,"pName":值,"pDesc":值,"price":值,"pCount":1},
    tr.innerHTML = '<td style="text-align: center;">' +
        '<input type="checkbox" class="ck"  />' +
        '</td>' +
        '<td>' +
        '<img src="' + listObj[i].pImg + '" alt="" />' +
        '</td>' +
        '<td style="color: #1E5494; font-size: 14px;">' + '<p style="margin: 0 25%;">'+ listObj[i].pDesc + '</p>' +
        '</td>' +
        '<td>' +
        '<button style="margin-left: 35%" class="down">-</button>' +
        '<input style="width: 10%;" type="text" value="' + listObj[i].pCount + '" readonly="readonly" />' +
        '<button class="up">+</button>' +
        '</td>' +
        '<td>' +
        '<span style="font-size: 16px;font-family: 微軟雅黑,宋體;font-weight: bold;display: block;text-align: center;">'+ listObj[i].price +  '</span>' +
        '</td>' +
        '<td>' +
        '<span style="font-size: 16px;font-family: 微軟雅黑,宋體;font-weight: bold;display: block;text-align: center;">'+ listObj[i].price * listObj[i].pCount + '</span>' +
        '</td>' +
        '<td>' +
        '<button style="display: block; margin:auto;" class="del" >刪除</button>' +
        '</td>';
    tbody.appendChild(tr);//appendChild() 方法向節(jié)點添加最后一個子節(jié)點。
  }
}

/*
 功能：計算總價格
 */
var cks = document.querySelectorAll("tbody .ck");
//querySelectorAll()方法返回匹配指定 CSS 選擇器元素的所有元素 。
function getTotalPrice() {
  cks = document.querySelectorAll("tbody .ck");
  var sum = 0;
  for(var i = 0, len = cks.length; i < len; i++) {
    if(cks[i].checked) { //如果當(dāng)前被選中
      var tr = cks[i].parentNode.parentNode;
      //parentNode 屬性以 Node 對象的形式返回指定節(jié)點的父節(jié)點。如果指定節(jié)點沒有父節(jié)點，則返回 null。
      var temp = tr.children[5].firstElementChild.innerHTML;
      sum = Number(temp) + sum;
    }
  }
  return sum;
}
/*循環(huán)遍歷為每一個checkbox添加一個onchange事件*/
for(var i = 0, len = cks.length; i < len; i++) {
  cks[i].onchange = function() {
    checkAllChecked();
    totalPrice.innerHTML = getTotalPrice();
  }
}

/*全選實現(xiàn)*/
allCheck.onchange = function() {
  if(this.checked) {
    for(var i = 0, len = cks.length; i < len; i++) {
      cks[i].checked = true;
    }
  } else {
    for(var i = 0, len = cks.length; i < len; i++) {
      cks[i].checked = false;
    }
  }
  totalPrice.innerHTML = getTotalPrice();
}

var downs = document.querySelectorAll(".down"); //一組減的按鈕
var ups = document.querySelectorAll(".up"); //一組加的按鈕
var dels = document.querySelectorAll(".del"); //一組刪除按鈕
for(var i = 0, len = downs.length; i < len; i++) {
  downs[i].onclick = function() {
    var txtObj = this.nextElementSibling;//下一個兄弟節(jié)點
    var tr = this.parentNode.parentNode;
    var pid = tr.getAttribute("pid"); //getAttribute() 方法返回指定屬性名的屬性值。
    txtObj.value = txtObj.value - 1;
    if(txtObj.value < 1) {
      txtObj.value = 1;
      updateObjById(pid, 0)
    } else {
      updateObjById(pid, -1)
    }
    tr.children[0].firstElementChild.checked = true;
    checkAllChecked();
    var price = tr.children[4].firstElementChild.innerHTML;
    tr.children[5].firstElementChild.innerHTML = price * txtObj.value;
    totalPrice.innerHTML = getTotalPrice();

  }

  ups[i].onclick = function() {
    var txtObj = this.previousElementSibling;//上一個兄弟節(jié)點
    var tr = this.parentNode.parentNode;
    var pid = tr.getAttribute("pid");
    txtObj.value = Number(txtObj.value) + 1;
    updateObjById(pid, 1)
    tr.children[0].firstElementChild.checked = true;
    checkAllChecked()
    var price = tr.children[4].firstElementChild.innerHTML;
    tr.children[5].firstElementChild.innerHTML = price * txtObj.value;
    totalPrice.innerHTML = getTotalPrice();
  }

  dels[i].onclick = function() {
    var tr = this.parentNode.parentNode;
    var pid = tr.getAttribute("pid")
    if(confirm("確定刪除？")) {
      //remove()  移除
      tr.remove();
      listObj = deleteObjByPid(pid);
    }
    if(listObj.length == 0) { //購物車為空
      box.className = "box";
      table.className = "hide";
    } else {
      box.className = "box hide";
      table.className = "";
    }
    totalPrice.innerHTML = getTotalPrice();
  }
}

/*檢測是否要全選*/
function checkAllChecked() {
  var isSelected = true; //全選是否會選中
  for(var j = 0, len = cks.length; j < len; j++) {
    if(cks[j].checked == false) {
      isSelected = false;
      break;
    }
  }
  allCheck.checked = isSelected;
}
</script>

Create a cart.js file and put the above JavaScript code into it.

<script type="text/javascript" src="cart.js"></script>

Later called from the HTML page to achieve the function module effect.