本文介绍了使用原生JavaScript实现购物车功能的整体思路和实施步骤，包括利用table API获取td值的技巧，以及即将涉及的四个关键点：复选框选中商品、结算功能、数量增减及商品选择。通过逐步完善这些功能，实现完整的购物车系统。
原生js-购物车案例（一）整体思路和实施步骤
在准备写购物车之前补充一个小小的知识点（有关table的一个api）：
<body>
<table id="tab">
<tbody>
<tr>
<td>333</td>
</tr>
</tbody>
</table>
</body>
获取上述的td中的值我们可以这样操作
<script>
var tab = document.getElementById("tab");
alert(tab.getElementsByTagName("tbody")[0]
.getElementsByTagName("tr")[0]
.getElementsByTagName("td")[0].innerHTML);
</script>
有点小麻烦，我们可以不用获取tbody，tr，td节点，像下面的代码这么做
var tab = document.getElementById("tab");
alert(tab.tBodies[0].rows[0].cells[0].innerHTML);
//tbody ===> tBodies
//tr===>rows
//td ==>cells
</script>
另外还要注意一点：
在一个table中，设置tr和td，尽管不设置tbody 也会默认在table和tr中间生成一个tbody，而且要注意，只有设置tr td的时候会出现tbody（设置tr th不会默认生成tbody）
补充这个知识点的原因，是因为我们的html部分使用表格做的，用这个知识点操作更方便。
附上css和html部分：
css部分
* {
margin: 0;
padding: 0;
}
a {
color: #666;
text-decoration: none;
}
body {
padding: 20px;
color: #666;
}
.fl{
float: left;
}
.fr {
float: right;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 0;
text-align: center;
width: 937px;
}
th, td {
border: 1px solid #CADEFF;
}
th {
background: #e2f2ff;
border-top: 3px solid #a7cbff;
height: 30px;
}
td {
padding: 10px;
color: #444;
}
tbody tr:hover {
background: RGB(238,246,255);
}
.checkbox {
width: 60px;
}
.goods {
width: 300px;
}
.goods span {
width: 180px;
margin-top: 20px;
text-align: left;
float: left;
}
.price {
width: 130px;
}
.count {
width: 90px;
}
.count .add, .count input, .count .reduce {
float: left;
margin-right: -1px;
position: relative;
z-index: 0;
}
.count .add, .count .reduce {
height: 23px;
width: 17px;
border: 1px solid #e5e5e5;
background: #f0f0f0
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
