JavaScript購物車最基本的功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> table{ border-collapse: collapse; } th{ width: 80px; height: 30px; } td{ text-align: center; line-height: 30px; } </style> </head> <body> <div class="box"> <table border="" cellspacing="" cellpadding=""> <thead> <th ><input type="checkbox" id="checkedAll"/>選擇</th> <th>商品</th> <th>價格</th> <th>數量</th> <th>總價</th> <th>操作</th> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>黃燜雞米飯1</td> <td>10</td> <td> <span class="jian">-</span> <input type="text" style="width: 30px;text-align: center;" value="1" readonly="readonly"/> <span class="jia">+</span> </td> <td> <span style="color: red;">10</span> </td> <td> <a style="cursor: pointer;">刪除</a> </td> </tr> <tr> <td><input type="checkbox" /></td> <td>黃燜雞米飯2</td> <td>20</td> <td> <span class="jian">-</span> <input type="text" style="width: 30px;text-align: center;"value="1" readonly="readonly"/> <span class="jia">+</span> </td> <td> <span style="color: red;">20</span> </td> <td> <a style="cursor: pointer;">刪除</a> </td> </tr> </tbody> </table> </div> </body> <script> window.onload=function(){ var checkedAll=document.getElementById("checkedAll") var tb=document.getElementById("tb") var oinput=tb.getElementsByTagName('input') var jian=document.getElementsByClassName('jian') var jia=document.getElementsByClassName('jia') var shanchu=tb.getElementsByTagName('a') console.log(shanchu) //全選 checkedAll.onclick=function(){ for(var i=0;i<oinput.length;i++){ oinput[i].checked=this.checked } } //當下級有一個沒有選中時那么全選按鈕則為false狀態 for(var i=0;i<oinput.length;i++){ oinput[i].onclick=function(){ var qx=true for(var i=0;i<oinput.length;i++){ if(oinput[i].checked==false){ qx=false } } checkedAll.checked=qx } } checkedAll.onclick=function(){ for(var i=0;i<oinput.length;i++){ oinput[i].checked=this.checked } } for(var i=0;i<oinput.length;i++){ oinput[i].onclick=function(){ var qx = true; for(i=0;i<oinput.length;i++){ if(oinput[i].checked==false){ qx=false } } checkedAll.checked=qx } } //加 for(var i=0;i<jia.length;i++){ jia[i].onclick=function(){ //previousSibling上一個兄弟節點 var val = parseInt(this.previousSibling.previousSibling.value); this.previousSibling.previousSibling.value = val + 1; jisuan(this) } } //減 for(var i=0;i<jian.length;i++){ jian[i].onclick=function(){ //nextSibling下一個兄弟節點 var val = parseInt(this.nextSibling.nextSibling.value); if(val > 1) { this.nextSibling.nextSibling.value = val - 1; } jisuan(this) } } //操作刪除 for(var i=0;i<shanchu.length;i++){ shanchu[i].onclick=function(){ var conf = confirm('確定刪除這件商品嗎？'); //parentNode父節點 console.log(this.parentNode.parentNode) if(conf) { //removeChild 刪除節點 tb.removeChild(this.parentNode.parentNode); } } } //總價 function jisuan(t){ var tr=t.parentNode.parentNode var result=document.getElementById("result") var td=tr.getElementsByTagName('td') td[4].getElementsByTagName('span')[0].innerHTML = parseInt(td[2].innerHTML)*parseInt(t.parentNode.getElementsByTagName('input')[0].value) } } </script> </html>
新聞熱點
疑難解答
圖片精選
