這篇文章將為大家詳細講解有關JavaScript實現購物車基本功能的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
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" value="1" readonly="readonly"/>
<span class="jia">+</span>
</td>
<td>
<span >10</span>
</td>
<td>
<a >刪除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>黃燜雞米飯2</td>
<td>20</td>
<td>
<span class="jian">-</span>
<input type="text" value="1" readonly="readonly"/>
<span class="jia">+</span>
</td>
<td>
<span >20</span>
</td>
<td>
<a >刪除</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>關于“JavaScript實現購物車基本功能的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
