JavaScript實現(xiàn)購物車基本功能
更新時間:2017年07月21日 08:39:01 作者:yudeboo
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)購物車的基本功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
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>數(shù)量</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狀態(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上一個兄弟節(jié)點 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下一個兄弟節(jié)點 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é)點 console.log(this.parentNode.parentNode) if(conf) { //removeChild 刪除節(jié)點 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>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
JS實現(xiàn)滾動觸底的思路與代碼(附PC端滾動分頁加載數(shù)據(jù))
Javascript實現(xiàn)當頁面滾動到底部時觸發(fā)加載事件,可以通過監(jiān)聽窗口的滾動事件,同時判斷當前滾動條的位置和文檔總高度來實現(xiàn)該功能,這篇文章主要給大家介紹了關于JS實現(xiàn)滾動觸底的思路與代碼,文中還附PC端滾動分頁加載數(shù)據(jù),需要的朋友可以參考下2024-06-06JavaScript中的構造函數(shù)和實例對象之間的關系(構造器)
這篇文章主要介紹了JavaScript中的構造函數(shù)和實例對象之間的關系(構造器),需要的朋友可以參考下2023-05-05淺談js中用$(#ID)來作為選擇器的問題(id重復的時候)
下面小編就為大家?guī)硪黄獪\談js中用$(#ID)來作為選擇器的問題(id重復的時候)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02