JavaScript購物車最基本的功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下<!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>價(jià)格</th> <th>數(shù)量</th> <th>總價(jià)</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 } } //當(dāng)下級(jí)有一個(gè)沒有選中時(shí)那么全選按鈕則為false狀態(tài) 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上一個(gè)兄弟節(jié)點(diǎn) 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下一個(gè)兄弟節(jié)點(diǎn) 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父節(jié)點(diǎn) console.log(this.parentNode.parentNode) if(conf) { //removeChild 刪除節(jié)點(diǎn) tb.removeChild(this.parentNode.parentNode); } } } //總價(jià) 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> 以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注
