<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table{ border: 1xp solid; width: 800px; } th{ background-color: lightsteelblue; border: 1px solid #fff; } td{ background-color: #f0f0f0; border: 1px solid #fff; height: 30px; vertical-align: middle; text-align: center; } </style> <script src="https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/02/07/shopping.js"></script> </head> <body> <div> <form action=""> <p>商品名稱: <input type="text" id="itemTitle"> </p> <p>商品價格：<input type="text" id="itemPrice"> </p> <p>購買數量： <input type="text" id="itemNum"></p> <p><input type="button" value="https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/02/07/添加" id="add"></p> </form> </div> <div> <h2>購物車</h2> </div> <div> <table id="itemList"> <tr> <th><input type="checkbox"></th> <th>名稱</th> <th>價格</th> <th>數量</th> <th>小計</th> <th>操作</th> </tr> <tr> <td><input type="checkbox"></td> <td>《JavaScript全面解毒，解不掉就毒死》</td> <td>18.0</td> <td> <input type="button" value="https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/02/07/-" name="decr"> <input type="text" style="width:20px" value="https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/02/07/1"> <input type="button" value="https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/02/07/+" name="incr"> </td> <td name ="subTotal">18.0</td> <td> <input type="button" value="https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/02/07/洗掉" name="remBtn"> </td> </tr> <tr> <td><input type="checkbox"></td> <td>《JavaScript全面解毒，解不掉就毒死》</td> <td>18.0</td> <td> <input type="button" value="https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/02/07/-" name="decr"> <input type="text" style="width:20px" value="https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/02/07/1"> <input type="button" value="https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/02/07/+" name="incr"> </td> <td name ="subTotal">18.0</td> <td> <input type="button" value="https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/02/07/洗掉" name="remBtn"> </td> </tr> <tr> <td> <input type="checkbox"> </td> <td>《JavaScript全面解毒，解不掉就毒死》</td> <td>18.0</td> <td> <input type="button" value="https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/02/07/-" name="decr"> <input type="text" style="width:20px" value="https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/02/07/1"> <input type="button" value="https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/02/07/+" name="incr"> </td> <td name ="subTotal">18.0</td> <td> <input type="button" value="https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/02/07/洗掉" name="remBtn"> </td> </tr> </table> </div> <div style="text-align: right; margin-right: 50px; width: 800px; margin-top: 10px; border-top: 1px solid #ccc;" >總價: <span id="total">180.00</span> <input type="button" value="https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/02/07/提交訂單" id="orderBtn"> </div> </body> </html> //shopping.js window.onload = function(){ //頁面加載完成立刻執行 getTotal(); //給所有的減按鈕系結事件 bindDecr(); //給所有的加按鈕系結事件 bindIncr(); //給添加商品的按鈕系結事件 bindAdd(); //給提交訂單的按鈕系結事件 document.getElementById("orderBtn").onclick = function(){ //取到所有的復選框，表頭的不算 var cks = document.querySelectorAll("td [type = 'checkbox']"); //遍歷計算總價 var total = 0; for(var x = 0;x < cks.length;x++){ if(cks[x].checked){ //被選中的復選框，取出這一行所有的td中的第5個小計的值 var td = cks[x].parentElement.parentElement.children[4]; //取出小計的值 total += parseInt(td.innerText); } } alert("訂單總價為："+total); } } //給添加商品的按鈕系結事件 function bindAdd(){ var addBtn = document.getElementById("add"); addBtn.onclick = function(){ //取出三個文本框 var itemTitleDom = document.getElementById("itemTitle"); var itemPriceDom = document.getElementById("itemPrice"); var itemNumDom = document.getElementById("itemNum"); var tableDom = document.getElementById("itemList"); //生成tr var tr = document.createElement("tr"); //checkbox var td1 = document.createElement("td"); var ip1 = document.createElement("input"); ip1.type = "checkbox"; td1.append(ip1); tr.append(td1); //名稱 var td2 = document.createElement("td"); td2.append(itemTitleDom.value); tr.append(td2); //價格 var td3 = document.createElement("td"); td3.append(itemPriceDom.value); tr.append(td3); //數量 var td4 = document.createElement("td"); var ip4 = document.createElement("input"); var btn1 = document.createElement("input"); var btn2 = document.createElement("input"); btn1.type = "button"; btn1.value = "https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/02/07/-"; btn1.name = "decr"; td4.append(btn1); ip4.type = "text"; ip4.style.width = "20px"; ip4.value = https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/02/07/itemNumDom.value; td4.append(ip4); btn2.type ="button"; btn2.value = "https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/02/07/+"; btn2.name = "incr"; td4.append(btn2); tr.append(td4); //小計 var td5 = document.createElement("td"); td5.setAttribute("name","subTotal"); tr.append(td5); //操作 var td6 = document.createElement("td"); var ip6 = document.createElement("input"); ip6.type = "button"; ip6.value = "https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/02/07/洗掉"; td6.append(ip6); tr.append(td6); //給這個洗掉按鈕直接系結事件 ip6.onclick = function(){ //洗掉整行，前三個不是動態生成的不能洗掉 ip6.parentElement.parentElement.remove(); //重新計算總價 getTotal(); } //將tr加入table tableDom.append(tr); //計算小計 getSubTotal(ip4); //計算總價 getTotal(); //減按鈕系結 bindDecr(); //加按鈕系結 bindIncr(); } } //定義一個函式計算總價 function getTotal(){ //找到所有小計的td var tds = document.querySelectorAll("[name='subTotal']"); var total = 0; //遍歷陣列，計算總價 for(var x = 0;x < tds.length;x++){ total += parseFloat(tds[x].innerText); } //將總價寫入對應的span document.getElementById("total").innerText = total; } //定義一個函式計算小計 // numDom 這里需要傳入輸入框的DOM物件本身 function getSubTotal(numDom){ //取出當前的數量 var num = numDom.value; //取出價格 var tdBtns = numDom.parentElement; //取出父元素td var price = parseFloat(tdBtns.previousElementSibling.innerText);//td的前一個兄弟節點就是價格 //計算小計 var subTotal = num * price; //將小計寫入后面 td的下一個兄弟元素節點 tdBtns.nextElementSibling.innerText = subTotal; } //定義一個函式給減按鈕添加事件 function bindDecr(){ //找到所有的減按鈕 var decrBtns = document.querySelectorAll("[name = 'decr']"); //遍歷DOM陣列，逐個系結事件 for(var x = 0;x < decrBtns.length;x++){ //解綁之前的事件,decrBtns[x]表示每一個 decrBtns[x].onclick = null; //重新系結事件 decrBtns[x].onclick = function(){ //這里的this就表示當前按鈕本身,取出輸入框物件 var inputDom = this.nextElementSibling; //取出值判斷是否已經等于1了 if(inputDom.value > 1){ inputDom.value = https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/02/07/inputDom.value - 1; //重新計算小計 getSubTotal(inputDom); //重新計算總價 getTotal(); } } } } //定義一個函式給加按鈕添加事件 function bindIncr(){ //找到所有的減按鈕 var incrBtns = document.querySelectorAll("[name = 'incr']"); //遍歷DOM陣列，逐個系結事件 for(var x = 0;x < incrBtns.length;x++){ //解綁之前的事件,incrBtns[x]表示每一個 incrBtns[x].onclick = null; //重新系結事件 incrBtns[x].onclick = function(){ //這里的this就表示當前按鈕本身,取出輸入框物件 var inputDom = this.previousElementSibling; //取出值 加按鈕不用判斷 inputDom.value = https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/02/07/parseInt(inputDom.value)+ 1; //重新計算小計 getSubTotal(inputDom); //重新計算總價 getTotal(); } } }
本文來自博客園，作者：{瀟瀟消消氣}，轉載請注明原文鏈接：{https://www.cnblogs.com/xiaoxiaodeboke/}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/423472.html
標籤：其他
上一篇：增刪商品計算價格
下一篇：【JavaScript】筆記（5）--- DOM（續）（復選框的全選和取消全選；獲取下拉串列選中項的value；網頁時鐘；內置支持類Array）