JS 实现 购物车客户端 计算

来源:互联网 发布:网页视频剪辑软件 编辑:程序博客网 时间:2024/04/29 05:20
<!DOCTYPE HTML>
<html>
<head>
<title>实现购物车客户端计算</title>
<meta charset="utf-8" />
<style>
table{width:800px; text-align:center;
border-collapse:collapse;
margin:0 auto;margin-top:30px; 
}
td,th{border:1px solid black}
td[colspan="3"]{text-align:center;}
td{width:220px;}
tr{height:50px;}
</style>
<script src="js/02buy.js"></script>
</head>
<body>
<table id="data">
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>iPhone8</td>
<td>&yen;8888</td>
<td>
<button onclick="calc(this)">-</button>
<span>0</span>
<button onclick="calc(this)">+</button>
</td>
<td>&yen;0</td>
</tr>
<tr>
<td>iPhone7 plus</td>
<td>&yen;6666</td>
<td>
<button onclick="calc(this)">-</button>
<span>0</span>
<button onclick="calc(this)">+</button>
</td>
<td>&yen;0</td>
</tr>
<tr>
<td>Mac pro</td>
<td>&yen;10888</td>
<td>
<button onclick="calc(this)">-</button>
<span>0</span>
<button onclick="calc(this)">+</button>
</td>
<td>&yen;0</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total</td>
<td>&yen;0</td>
</tr>
</tfoot>
</table>
</body>

</html>

<!DOCTYPE HTML>
<html>
<head>
<title>实现购物车客户端计算</title>
<meta charset="utf-8" />
<style>
table{width:800px; text-align:center;
border-collapse:collapse;
margin:0 auto;margin-top:30px; 
}
td,th{border:1px solid black}
td[colspan="3"]{text-align:center;}
td{width:220px;}
tr{height:50px;}
</style>
<script src="js/02buy.js"></script>
</head>
<body>
<table id="data">
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>iPhone8</td>
<td>&yen;8888</td>
<td>
<button onclick="calc(this)">-</button>
<span>0</span>
<button onclick="calc(this)">+</button>
</td>
<td>&yen;0</td>
</tr>
<tr>
<td>iPhone7 plus</td>
<td>&yen;6666</td>
<td>
<button onclick="calc(this)">-</button>
<span>0</span>
<button onclick="calc(this)">+</button>
</td>
<td>&yen;0</td>
</tr>
<tr>
<td>Mac pro</td>
<td>&yen;10888</td>
<td>
<button onclick="calc(this)">-</button>
<span>0</span>
<button onclick="calc(this)">+</button>
</td>
<td>&yen;0</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total</td>
<td>&yen;0</td>
</tr>
</tfoot>
</table>
</body>
</html>


WEB前端学习交流群21 598399936



原创粉丝点击