HTML代碼
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/script.js" ></script>
</head>
<body>
<th id="header"><h1>歡迎來到此網站，請盡情購物吧</h1></th>
<tr id="head">
<th width="100px">商品</th>
<th width="200px">商品描述</th>
<th width="200px">單價</th>
<th width="200px">規格</th>
<th width="200px">操作</th>
</tr>
<tr>
<td class="goods"></td>
<td class="describe">【12期免息】Huawei/華為Mate 30 Pro 5G麒麟990徠卡四攝5G芯片智能手機mate30pro5g官方旗艦店</td>
<td class="price">7899.00</td>
<td>
<option value="4GB+64GB">4GB+64GB</option>
<option value="8GB+64GB">8GB+64GB</option>
<option value="4GB+128GB">4GB+128GB</option>
<option value="8GB+128GB">8GB+128GB</option>
</select>
</td>
<td class="total">
加入購物車
</td>
</tr>
<tr>
<td class="goods"></td>
<td class="describe">保時捷Panamera S 威利原廠1:18 帕拉梅拉四門合金仿真汽車模型藍</td>
<td class="price">299.00</td>
<td>
<select class="select">
<option value="藍色 Panamera藍色">藍色 Panamera藍色</option>
<option value="911 GT-3 白色">911 GT-3 白色</option>
<option value="黑色 Cayenne黑色">黑色 Cayenne黑色</option>
</select>
</td>
<td class="total">
加入購物車
</td>
</tr>
<tr>
<td class="goods"></td>
<td class="describe">海賊海賊王 超大王拼圖1000片木質成年路飛卡通包郵</td>
<td class="price">49.99</td>
<td>
<option value="海賊王全家福">海賊王全家福</option>
<option value="兩年后9人集結">兩年后9人集結</option>
<option value="少年初長成">少年初長成</option>
</select>
</td>
<td class="total">
加入購物車
</td>
</tr>
<tr>
<td class="goods"></td>
<td class="describe">ThinkPad E490 2UCD/2XCD英特爾酷睿i5 14英寸聯想筆記本電腦商務辦公輕薄便攜官方旗艦店2019款筆記本</td>
<td class="price">7899.00</td>
<td>
<option value="2XCD:i5/8G/128GB+1TB/2G獨顯">2XCD:i5/8G/128GB+1TB/2G獨顯</option>
<option value="2UCD:i5/8G/ 256GB/ 2G獨顯">2UCD:i5/8G/ 256GB/ 2G獨顯</option>
</select>
</td>
<td class="total">
加入購物車
</td>
</tr>
</table>
<th id="header"><h1>已加入購物車的寶貝</h1></th>
<thead id="head">
<th width="100px">商品</th>
<th width="200px">商品描述</th>
<th width="100px">單價</th>
<th width="200px">規格</th>
<th width="100px">數量</th>
<th width="100px">金額</th>
<th width="100px">刪除</th>
</thead>
<tbody id="goods"></tbody>
<tfoot>
<td colspan="5" align="center">總計</td>
<td id="total"></td>
<td>元</td>
</tfoot>
</table>
</div>
</body>
</html>
JS代碼
//增加購物車列表中的行
function addr(button){
//從商品列表中獲取元素
var tr = button.parentNode.parentNode;
var td = tr.getElementsByTagName("td");
var goods = td[0].innerHTML;
var des = td[1].innerHTML;
var price = td[2].innerHTML;
var sele = td[3].innerHTML;
//使用insertRow（）函數增加行
var tbody=document.getElementById("goods");
var row=tbody.insertRow();
//將獲取的對應的元素放入新增加的行中
row.innerHTML = "<td>"+goods+"</td>"+
"<td>"+des+"</td>"+
"<td>"+price+"</td>"+
"<td>"+sele+"</td>"+
"<td align='center'>"+
"<input type='button' value=' - ' id='jian' onclick=jian(this)>"+
"<input id='text' type='text' size='1' value='1' />"+
"<input type='button' value=' + ' id='add' onclick=add(this)>"+"</td>"+
"<td>"+price+"</td>"+
"<td align='center'>"+
"<input type='button' value='刪除' class='add1' onclick=dele(this)>"+
"</td>"
//計算總價函數
total();
}
//刪除函數
function dele(dele){
dele.parentNode.parentNode.remove();
total();
}
//數量減少函數
function jian(jian){
//獲取jian父節點的所有input標簽
var inputs = jian.parentNode.getElementsByTagName("input");
//取出放在第二列的數量
amount = inputs[1].value;
//轉換為整型
var amount1 = parseInt(amount);
//最小數量為1
if(amount1 == 1){
return;
}
inputs[1].value=amount1-1;
//根據數量的變化，計算出當前數量對應的金額
var tr = jian.parentNode.parentNode;
var tds = tr.getElementsByTagName("td");
var price = parseFloat(tds[2].innerHTML);
var sum = price*amount1;
tds[5].innerHTML=sum-price;
total();
}
function add(add){
var inputs = add.parentNode.getElementsByTagName("input");
amount = inputs[1].value;
var amount1 = parseInt(amount);
inputs[1].value=amount1+1;
var tr = add.parentNode.parentNode;
var tds = tr.getElementsByTagName("td");
var price = parseFloat(tds[2].innerHTML);
var sum = price*amount1;
tds[5].innerHTML=sum+price;
total();
}
//計算總價函數
function total() {
var tbody = document.getElementById("goods");
//取出tbody中所有tr標簽
var trs = tbody.getElementsByTagName("tr");
var sum = 0;
//遍歷trs數組，並計算每一個tr標簽中金額的總和
for(var i = 0; i < trs.length; i++) {
var tds = trs[i].getElementsByTagName("td");
var m = tds[5].innerHTML;
sum += parseFloat(m);
}
var total = document.getElementById("total");
total.innerHTML = sum;
}
function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("shopping")) return false;
var gallery = document.getElementById("shopping");
var links = gallery.getElementsByTagName("button");
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() {
return addr(this);
}
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(prepareGallery);
CSS樣式表
* {
margin: 0px;
padding: 0px;
}
body{
text-align: center;
}
table,
td,
td {
border: 1px solid #000000;
font-size: 10px;
}
table {
display: block;
}
img {
float: left;
}
tr {
text-align: center;
}
#box {
width: 900px;
height: 1500px;
border: 1px solid white;
margin-top: 20px;
margin-left: 300px;
}
#shopping {
float: left;
text-align: center;
border-collapse: collapse;
}
#head {
height: 20px;
background: #F0FFFF;
}
#header{
color: gold;
letter-spacing: 0;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777,
0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135 }
}
.add{
height: 30px;
text-align: center;
width: 100px;
border-radius: 5px;
cursor: pointer;
}
.add:hover{
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
.add1{
height: 30px;
text-align: center;
width: 50px;
border-radius: 5px;
cursor: pointer;
}
.add1:hover{
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
.select{
cursor: pointer;
}
.photos{
height: 100px;
width: 100px;
}
.describe{
padding: 5px;
text-align: left;
}
.goods {
padding: 5px;
text-align: left;
}
.total {
color: #ff0000;
font-weight: 700;
}
運行后的樣式如下圖
