效果圖：
代碼如下：
<!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>單價</td> <td>數量</td> <td>小計</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">總計：</td> <td id="all_total"></td> </tfoot> </table> <script> function btnClick(btn){ //聲明 spanValue 變量，用于保存 span中的數據 var spanValue; //1、更改 span 中的數據 //1.1 判斷 btn 是+還是- if(btn.textContent == "+"){ //1.2 根據 btn 找到 span var span=btn.previousElementSibling; //1.3 獲取 span里的數據 spanValue=parseInt(span.textContent); //1.4 更新 span中的數據 spanValue+=1; span.textContent=spanValue; }else{ //減法操作 var span = btn.nextElementSibling; //1.3 獲取 span里的數據 spanValue=parseInt(span.textContent); //1.4 更新 span中的數據 if(spanValue > 1){ spanValue-=1; span.textContent=spanValue; } } //2.計算 小計 //2.1 先 獲取 單價 元素(tdPrice) var tdPrice=btn.parentNode.previousElementSibling; //2.2 獲取 單價 元素中的 數值(price) var price=parseInt(tdPrice.textContent); //2.3 計算小計(spanValue*price),保存在 total var total=price*spanValue; //2.4 獲取 小計 元素(tdTotal) var tdTotal=btn.parentNode.nextElementSibling; //2.5 將 total 的值 賦值給 tdTotal元素 tdTotal.textContent=total; //調用 計算總計 的函數 calAllTotal(); } /** * 計算總計 */ function calAllTotal(){ //1、獲取 id為tbody 中的所有tr var tbody = document.getElementById("tbody"); var trs=tbody.getElementsByTagName("tr"); console.log(trs); //2、循環遍歷所有tr，找到每個tr的最后一個td var all_total=0; for(var i=0;i<trs.length;i++){ var tr=trs[i]; //3、累加 每個 td 的值 計算總計 //3.1 獲取 tr 中的 最后一個td var lastTd=tr.lastElementChild; var lastTdValue=parseInt(lastTd.textContent); all_total += lastTdValue; } //4、賦值 document.getElementById("all_total").textContent=all_total; } //加載時調用 calAllTotal() 計算現有的總計 calAllTotal(); </script> </body></html>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
