快捷導(dǎo)航

js中的DOM模擬購(gòu)物車功能

更新時(shí)間：2017年03月22日 10:40:19 作者：18301695170

本篇文章主要介紹了js中的DOM模擬購(gòu)物車功能的示例代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧

效果圖：

代碼如下：

<!DOCTYPE html>
<html>
 <head>
 <title> new document </title>
 <meta charset="utf-8">
 <style>
 table{
 border:1px solid #000;
 border-collapse:collapse;
 width:600px;
 }
 td{
 border:1px solid #000;
 text-align:center;
 }
 </style>
 </head>
 <body>
 <table>
 <thead>
 <tr>
 <td>名稱</td>
 <td>單價(jià)</td>
 <td>數(shù)量</td>
 <td>小計(jì)</td>
 </tr>
 </thead>
 <tbody id="tbody">
 <tr>
 <td>iphone6</td>
 <td>4488</td>
 <td>
  <button onclick="btnClick(this)">-</button>
  <span>1</span>
  <button onclick="btnClick(this)">+</button>
 </td>
 <td>4488</td>
 </tr>
 <tr>
 <td>iphone6</td>
 <td>5288</td>
 <td>
  <button onclick="btnClick(this)">-</button>
  <span>1</span>
  <button onclick="btnClick(this)">+</button>
 </td>
 <td>5288</td>
 </tr>
 <tr>
 <td>iphone6</td>
 <td>4288</td>
 <td>
  <button onclick="btnClick(this)">-</button>
  <span>1</span>
  <button onclick="btnClick(this)">+</button>
 </td>
 <td>4288</td>
 </tr>
 </tbody>
 <tfoot>
 <td colspan="3" align="right">總計(jì)：</td>
 <td id="all_total"></td>
 </tfoot>
 </table>
 <script>
 function btnClick(btn){
 //聲明 spanValue 變量，用于保存 span中的數(shù)據(jù)
 var spanValue;
 //1、更改 span 中的數(shù)據(jù)
 //1.1 判斷 btn 是+還是-
 if(btn.textContent == "+"){
 //1.2 根據(jù) btn 找到 span
 var span=btn.previousElementSibling;
 //1.3 獲取 span里的數(shù)據(jù)
 spanValue=parseInt(span.textContent);
 //1.4 更新 span中的數(shù)據(jù)
 spanValue+=1;
 span.textContent=spanValue;
 }else{
 //減法操作
 var span = btn.nextElementSibling;
 //1.3 獲取 span里的數(shù)據(jù)
 spanValue=parseInt(span.textContent);
 //1.4 更新 span中的數(shù)據(jù)
 if(spanValue > 1){
  spanValue-=1;
  span.textContent=spanValue;
 }
 }
 //2.計(jì)算 小計(jì)
 //2.1 先 獲取 單價(jià) 元素(tdPrice)
 var tdPrice=btn.parentNode.previousElementSibling;
 //2.2 獲取 單價(jià) 元素中的 數(shù)值(price)
 var price=parseInt(tdPrice.textContent);
 //2.3 計(jì)算小計(jì)(spanValue*price),保存在 total
 var total=price*spanValue;
 //2.4 獲取 小計(jì) 元素(tdTotal)
 var tdTotal=btn.parentNode.nextElementSibling;
 //2.5 將 total 的值 賦值給 tdTotal元素
 tdTotal.textContent=total;
 //調(diào)用 計(jì)算總計(jì) 的函數(shù)
 calAllTotal();
 }
 /**
 * 計(jì)算總計(jì)
 */
 function calAllTotal(){
 //1、獲取 id為tbody 中的所有tr
 var tbody = document.getElementById("tbody");
 var trs=tbody.getElementsByTagName("tr");
 console.log(trs);
 //2、循環(huán)遍歷所有tr，找到每個(gè)tr的最后一個(gè)td
 var all_total=0;
 for(var i=0;i<trs.length;i++){
 var tr=trs[i];
 //3、累加 每個(gè) td 的值 計(jì)算總計(jì)
 //3.1 獲取 tr 中的 最后一個(gè)td
 var lastTd=tr.lastElementChild;
 var lastTdValue=parseInt(lastTd.textContent);
 all_total += lastTdValue;
 }
 //4、賦值
 document.getElementById("all_total").textContent=all_total;
 }
 //加載時(shí)調(diào)用 calAllTotal() 計(jì)算現(xiàn)有的總計(jì)
 calAllTotal();
 </script>
 </body>
</html>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: