JavaScript實(shí)現(xiàn)購(gòu)物車(chē)基本功能
JavaScript購(gòu)物車(chē)最基本的功能,具有一定的參考價(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è)沒(méi)有選中時(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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js購(gòu)物車(chē)實(shí)現(xiàn)思路及代碼(個(gè)人感覺(jué)不錯(cuò))
- Javascript操縱Cookie實(shí)現(xiàn)購(gòu)物車(chē)程序
- 簡(jiǎn)單的前端js+ajax 購(gòu)物車(chē)框架(入門(mén)篇)
- js實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車(chē)有圖有代碼
- JavaScript編寫(xiě)一個(gè)簡(jiǎn)易購(gòu)物車(chē)功能
- 原生js模擬淘寶購(gòu)物車(chē)項(xiàng)目實(shí)戰(zhàn)
- 基于Vuejs實(shí)現(xiàn)購(gòu)物車(chē)功能
- Javascript操縱Cookie實(shí)現(xiàn)購(gòu)物車(chē)程序
- 利用Angularjs和bootstrap實(shí)現(xiàn)購(gòu)物車(chē)功能
- js實(shí)現(xiàn)商品拋物線(xiàn)加入購(gòu)物車(chē)特效
相關(guān)文章
JS實(shí)現(xiàn)滾動(dòng)觸底的思路與代碼(附PC端滾動(dòng)分頁(yè)加載數(shù)據(jù))
Javascript實(shí)現(xiàn)當(dāng)頁(yè)面滾動(dòng)到底部時(shí)觸發(fā)加載事件,可以通過(guò)監(jiān)聽(tīng)窗口的滾動(dòng)事件,同時(shí)判斷當(dāng)前滾動(dòng)條的位置和文檔總高度來(lái)實(shí)現(xiàn)該功能,這篇文章主要給大家介紹了關(guān)于JS實(shí)現(xiàn)滾動(dòng)觸底的思路與代碼,文中還附PC端滾動(dòng)分頁(yè)加載數(shù)據(jù),需要的朋友可以參考下2024-06-06JavaScript中的構(gòu)造函數(shù)和實(shí)例對(duì)象之間的關(guān)系(構(gòu)造器)
這篇文章主要介紹了JavaScript中的構(gòu)造函數(shù)和實(shí)例對(duì)象之間的關(guān)系(構(gòu)造器),需要的朋友可以參考下2023-05-05js 下拉菜單點(diǎn)擊旁邊收起實(shí)現(xiàn)(踩坑記)
這篇文章主要介紹了js 下拉菜單點(diǎn)擊旁邊收起實(shí)現(xiàn)(踩坑記),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09uniapp小程序項(xiàng)目獲取位置經(jīng)緯度信息
在實(shí)際項(xiàng)目中很多時(shí)候我們需要獲取設(shè)備的位置信息,去展示給客戶(hù),或者以位置信息為參數(shù),繼續(xù)向服務(wù)器獲取一些數(shù)據(jù),這篇文章主要介紹了uni-app如何獲取位置信息(經(jīng)緯度),需要的朋友可以參考下2022-11-11淺談js中用$(#ID)來(lái)作為選擇器的問(wèn)題(id重復(fù)的時(shí)候)
下面小編就為大家?guī)?lái)一篇淺談js中用$(#ID)來(lái)作為選擇器的問(wèn)題(id重復(fù)的時(shí)候)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02