下面是我做的一个超简单的购物车,全部都是用原生js做的
css
}
table img{
width: 50px;
}
a {
text-decoration: none;
color: red;
}
body
<tr><td><input type="checkBox" name="ck"/></td>
<td>
</td><td>3</td>
<td><input type="number" max="10" min="0" step="1" value="1"/></td>
<td><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">删除</td>
</tr>
</table>
<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dels">删除选中项
js
var dels = document.getElementsByClassName("del");//创建del对象
for(var i = 0;i<dels.length;i++){//循环得到
dels[i].onclick=function(){
this.parentNode.parentNode.remove();
getSum();
}
}
document.getElementsByClassName("dels")[0].onclick=function(){
var cks = document.getElementsByName("ck");
for(var i = cks.length-1;i>=0;i--){
if(cks[i].checked){
cks[i].parentNode.parentNode.remove();
}
}
getSum();
}
}
效果图
这个购物车是在学习js时做的,比较简单,但基本功能还是有的:
大家用在线的编辑器查看一下效果会更好.
如果有问题的话,可以随时交流... (过两天会用jQury在做一个购物车的例子)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/js/35694.html