javascript實作簡單購物車功能（有圖）
本文連結：https://blog.csdn.net/qq_41140741/article/details/81543105
Js實作淘寶購物車類似功能：
主要有添加商品
增加和減少商品數量
根據增加、減少或選擇的商品擷取金額
實作商品價格的計算
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>購物車</title>
</head>
<style type="text/css">
h1{
text-align: center;
}
table{
margin: 0 auto;
}
body{
font-size: larger;color: crimson;
background-image: url(img/2.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
table th,table td{
}
</style>
<body >
<h1>購物車:真劃算</h1>
<table >
<tr>
<!--文本th-->
<th>商品</th>
<th >單價</th>
<th>顔色</th>
<th>庫存</th>
<th>好評率</th>
<th>操作</th>
</tr>
<tr>
<td>面膜</td>
<td >150</td>
<td>白色</td>
<td>100</td>
<td>88%</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcar(this)"/>
</td>
</tr>
<tr>
<td>口紅</td>
<td >350</td>
<td>白色</td>
<td>166</td>
<td>82%</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcar(this)"/>
</td>
</tr>
<tr>
<td>滑鼠</td>
<td >150</td>
<td>黑色</td>
<td>99</td>
<td>75%</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcar(this)"/>
</td>
</tr>
<tr>
<td>鍵盤</td>
<td >120</td>
<td>黑色</td>
<td>50</td>
<td>80%</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcar(this)"/>
</td>
</tr>
</table>
<h1> 購物車</h1>
<table >
<thead>
<tr>
<th>商品</th>
<th >單價</th>
<th>數量</th>
<th>金額</th>
<th>删除</th>
</tr>
</thead>
<tbody id="goods">
<!--<tr>
<td>面膜</td>
<td>150</td>
<td align="center">
<input type="button" value="-" id="jian" οnclick="change(this,-1);"/>-->
<!--readonly規定輸入字段為隻讀-->
<!--<input id="text" type="text" size="1" value="1" readonly="readonly" />
<input type="button" value="+" id="add" οnclick="change(this,1);"/>
</td>
<td> <input id="money" size="1" value="80"></input></td>
<td align="center">
<input type="button" value="X" οnclick="del(this)" />
</td>
</tr>-->
</tbody>
<tfoot>
<tr>
<td colspan="3" align="center" >總計</td>
<td id="total"></td>
<td>元</td>
</tr>
</tfoot>
</table>
</body>
<script type="text/javascript">
//this js中指目前對象
function add_shoppingcar(btn){
var tr=btn.parentNode.parentNode;
var tds=tr.getElementsByTagName("td");
var name=tds[0].innerHTML;
var price=tds[1].innerHTML;
var tbody=document.getElementById("goods");
var row=tbody.insertRow();//insertRow表格開頭插入新行
row.innerHTML="<td>"+name+"</td>"+
"<td>"+price+"</td>"+
"<td align='center'>"+
"<input type='button' value='-' id='jian' οnclick='change(this,-1)' />"+
"<input id='text' type='text' size='1' value='1' readonly='readonly' />"+
"<input type='button' value='+' id='add' οnclick='change(this,1)' />"+
"</td>"+
"<td>"+price+"</td>"+
"<td align='center'>"+
"<input type='button' value='X' οnclick='del(this)'/>"+
"</td>"+
"</tr>"
total();
}
//增加減少數量，用n正負1來表示點選了加減按鈕
function change(btn,n){
//擷取數量的三個input對象
var inputs = btn.parentNode.getElementsByTagName("input");
//擷取原來的數量
var amount = parseInt(inputs[1].value);
//當amount=1時不能再點選"-"符号
//用n<0來表示點選了減button
if(amount<=1 && n<0){
return;
}
//根據加減來改變數量
inputs[1].value = amount + n;
//将改變後的數量值指派給amount
amount = inputs[1].value;
//擷取表格中的行
var tr = btn.parentNode.parentNode;
//擷取所有的列
var tds = tr.getElementsByTagName("td");
//擷取單價
var price = parseFloat(tds[1].innerHTML);
//總價=單價*數量
var m = price * amount;
//将總價指派給相應的位置
tds[3].innerHTML = m;
//調用total方法，求總計
total();
}
function total(){
var tbody=document.getElementById("goods");
var trs=tbody.getElementsByTagName("tr");
var sum=0;
for(var i=0;i<trs.length;i++){
var tds=trs[i].getElementsByTagName("td");
var m=tds[3].innerHTML;
sum += parseFloat(m);
}
var total=document.getElementById("total");
total.innerHTML = sum;
}
function del(i){
var tr=i.parentNode.parentNode;
tr.parentNode.removeChild(tr);
//tr.remove(tr);
total();
}
</script>
</html>
實作效果：
![web前端布局練手項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)