JavaScript开发购物车之购物车展示页
本节创建一个购物车展示页面
展示商品图片，商品内容描述，商品数量选择，商品单价
商品价格小计，商品删除操作，以及商品总价格计算。
| 标题： 购物车 | ||
| 跳转列表页 | ||
| 表头：显示各种信息名称 如：图片，描述，单价，选择等 | ||
内容： 选中的商品的信息和操作 | ||
| 显示总价 |
使用<h2>定义标题为购物车
<table>定义 HTML 表格。
<thead>展示表格头部，<tr> 元素定义表格行，<th> 元素定义表头,里面包含图片，描述，数量，单价，小计，操作等
<tbody>展示表格内容部分，<tr><td>元素定义表格单元，显示商品的内容。
<button>标签来创建“ + ”“ - ”按键，中间使用<input type="text">来显示数量。
底部表格外显示总价。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<!--购物车样式表-->
<style>
h2{
text-align: center;
}
table{
margin: auto;
width: 90%;
border-color: inherit;
}
th{
color: white;
font-weight: bold;
font-family: 微软雅黑,宋体;
}
img{
height: 60%;
display: block;
margin: auto;
}
input{
text-align: center;
font-weight: bold;
}
button{
font-weight: bold;
font-size: 13px;
}
</style>
</head>
<body>
<div class="container">
<h2>购物车</h2>
<h3><a href="list.php">返回商品列表页面</a></h3>
<table id="table" border="1" cellspacing="0" cellpadding="0" class="hide">
<thead>
<tr style="background-color: #87adbf;">
<th>
<input type="checkbox" id="allCheck" class="ck" />全选
</th>
<th>图片</th>
<th>描述</th>
<th>数量</th>
<th>单价</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
<!--
<tr>
<td><input type="checkbox" class="ck" /></td>
<td>
<img src="https://img.php.cn/upload/course/000/000/008/58297ff26fd94666.jpg" alt="" />
</td>
<td>纯机械，超酷表带</td>
<td>
<button style="width:100%;"class="down">-</button>
<input style="width:100%;" type="text" value="1" readonly="readonly" />
<button class="up">+</button>
</td>
<td>￥<span>3567</span></td>
<td>￥<span>3567</span></td>
<td><button class="del">删除</button></td>
</tr>
-->
</tbody>
</table>
<div class="box" id="box"></div>
<h2 id="h2" class="">总价格：￥<span id="totalPrice">0</span></h2>
</div>
</body>
</html>这样我们就创建了一个简单的购物车页面cart.php文件。
