简易购物车（最全代码解析）JavaScript（ES6面向对象）

VIP文章飒尔

已于 2022-03-04 15:46:38 修改

阅读量3.8k

点赞数 9

分类专栏： javascript 文章标签： javascript es6 面向对象编程

于 2021-09-08 10:11:08 首次发布

本文链接：https://blog.csdn.net/csertuh/article/details/120173639

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>ES6购物车</title>
		<style type="text/css">
			table {
				width: 50%;
				position: relative;
				margin: 0px auto;
				border-collapse: collapse;
				border: 1px solid gray;
				box-sizing: border-box;
			}
			th {
				background-color: coral;
				height: 2.5em;
				margin: 0 auto;
			}
			tr {
				height: 2.5em;
				margin: 0 auto;
				text-align: center;
			}
			.box {
				margin: auto;
				width: 50%;
			}
		</style>
	</head>
	<body>
		<h3 style="text-align: center;margin-top: 100px;">猜你喜欢</h3>
		<table border="1px" id="update-table">
			<tbody>
			<tr>
				<th>序号</th>
				<th>商品名称</th>
				<th>单价</th>
				<th>操作</th>
			</tr>
			<tr class="update-goods">
				<td>1</td>
				<td>肉夹馍</td>
				<td>8</td>
				<td><input type="button" class="update" value="加入购物车" /></td>
			</tr>
			<tr class="update-goods">
				<td>2</td>
				<td>擀面皮</td>
				<td>6</td>
				<td><input type="button" class="update" value="加入购物车" /></td>
			</tr>
			<tr class="update-goods">
				<td>3</td>
				<td>冰封</td>
				<td>3</td>
				<td><input type="button" class="update" value="加入购物车" /></td>
			</tr>
			<tr class="update-goods">
				<td>4</td>
				<td>羊肉泡馍</td>
				<td>25</td>
				<td><input type="button" class="update" value="加入购物车" /></td>
			</tr>
			</tbody>
		</table>
		<h3 style="text-align: center;">购物车</h3>
		<table border="1px" id="goods">
			<tbody>
				<tr>
					<th>序号</th>
					<th>商品名称</th>
					<th>数量</th&

最低0.47元/天解锁文章

飒尔

关注

9
点赞
踩
57

收藏

觉得还不错? 一键收藏
4
评论
简易购物车（最全代码解析）JavaScript（ES6面向对象）

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>购物车</title> <style type="text/css"> table { width: 50%; position: relative; margin: 0px auto; border-collapse: collapse; ...
复制链接

扫一扫