纯手写的原生js购物车 (不要在意布局)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
*{margin: 0; padding: 0 }
#table{ border-collapse:collapse; border:none; position: absolute; left: 200px; top: 100px; }
th,td{ border: 1px solid darkblue; cell-padding }
tr:hover{ background-color: skyblue; }
td>a{ cursor: pointer; }
td>img{ width: 200px; height: 100px; }
.jian,.jia{ width: 10px; height: 20px; cursor: pointer; display: inline-block; background-color: lightgray; }
</style>
</head>
<body>
<table id="table">
<thead>
<tr>
<th>
<input type="checkbox" name="" id="checkall">全选</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th></tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="" class="check"></td>
<td class="pd">
<img src="http://st.depositphotos.com/thumbs/1024381/image/2170/21708633/api_thumb_450.jpg">
<span>妹子</span></td>
<td class="danjia">10</td>
<td>
<em class="jian"></em>
<input type="text" value="1" class="calc">
<i class="jia">+</i></td>
<td class="totle">10</td>
<td>
<a class="del">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="" class="check"></td>
<td class="pd">
<img src="http://st.depositphotos.com/thumbs/1024381/image/2170/21708633/api_thumb_450.jpg">
<span>妹子</span></td>
<td class="danjia">10</td>
<td>
<em class="jian"></em>
<input type="text" value="1" class="calc">
<i class="jia">+</i></td>
<td class="totle">10</td>
<td>
<a class="del">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="" class="check"></td>
<td class="pd">
<img src="http://st.depositphotos.com/thumbs/1024381/image/2170/21708633/api_thumb_450.jpg">
<span>妹子</span></td>
<td class="danjia">10</td>
<td>
<em class="jian"></em>
<input type="text" value="1" class="calc">
<i class="jia">+</i></td>
<td class="totle">10</td>
<td>
<a class="del">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="" class="check"></td>
<td class="pd">
<img src="http://st.depositphotos.com/thumbs/1024381/image/2170/21708633/api_thumb_450.jpg">
<span>妹子</span></td>
<td class="danjia">10</td>
<td>
<em class="jian"></em>
<input type="text" value="1" class="calc">
<i class="jia">+</i></td>
<td class="totle">10</td>
<td>
<a class="del">删除</a></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td id="count">0</td>
<td id="allin"></td>
<td>结算</td></tr>
</tbody>
</table>
</body>
</html><script type="text/javascript">
var tr=document.getElementsByTagName('tr');
var jian=document.getElementsByClassName('jian');
var jia=document.getElementsByClassName("jia");
var calc=document.getElementsByClassName("calc");
var danjia=document.getElementsByClassName("danjia");
var totle=document.getElementsByClassName("totle");
var checkmax=document.getElementById("checkall");
var check=document.getElementsByClassName("check");
var count=document.getElementById("count");
var a=document.getElementsByClassName("del");
for(var i=0;i<tr.length;i++){
(function(index){
tr[index].addEventListener("click",function(e){
var target=e.target;
if(target.nodeName=="I"){
var calcNumber=calc[index-1].value*1;
calc[index-1].value=calcNumber+1;
jian[index-1].innerHTML="-";
totle[index-1].innerHTML=danjia[index-1].innerHTML*calc[index-1].value;
count.innerHTML=counter()
AIO()
}
})
})(i)
}
for(var i=0;i<tr.length;i++){
(function(index){
tr[index].addEventListener("click",function(e){
console.log(true)
var target=e.target;
if(target.nodeName=="EM"){
var calcNumber=calc[index-1].value*1;
if(calcNumber<=1){
calc[index-1].value=1;
jian[index-1].innerHTML="";
return false;
}
else{
calc[index-1].value=calcNumber-1;
totle[index-1].innerHTML=danjia[index-1].innerHTML*calc[index-1].value;
count.innerHTML=counter()
AIO()
}
}
},0)
})(i)
}
for(var i=0;i<a.length;i++){
(function(index){
a[index].addEventListener("click",function(){
var p=this.parentNode.parentNode;
var q=p.parentNode;
q.removeChild(p);
count.innerHTML=counter();
AIO();
},0)
})(i)
}
checkall.onclick=function(){
for(i in check){
if(checkall.checked){
check[i].checked=true
}else{
check[i].checked=false
}
}
count.innerHTML=counter()
AIO()
}
for(var i=0;i<check.length;i++){
(function(title){
check[title].onclick=function(){
for(i in check){
if (checkIf()) {
checkall.checked=true;
}else{
checkall.checked=false;
}
}
count.innerHTML=counter()
AIO()
}
})(i)
}
function checkIf(){
for(var i=0;i<check.length;i++){
if(check[i].checked==false){
return false
}
}
return true
}
function counter(){
var count=0;
for(var i=0;i<check.length;i++){
if (check[i].checked) {
count+=1*calc[i].value
}
}
return count;
}
function AIO(){
var money=0;
for(var i=0;i<check.length;i++){
if (check[i].checked) {
money+=totle[i].innerHTML*1
}
}
document.getElementById("allin").innerHTML=money
}
</script>
有个小bug还没解决
