您的位置：首页 > Web前端 > JavaScript

JS小案例之购物车

2015-10-08 23:20 513 查看
JS小案例之购物车

gwc1.js

function add_shoppingcart(ele){
//获取当前行的商品信息
var eleTr = ele.parentNode.parentNode;
var eles = eleTr.getElementsByTagName("td");
var name = eles[0].innerText;
var price = eles[1].innerText;
//alert(name+price);

var flag = find(name);

if(!flag){
//添加到购物车中
var tbody = document.getElementById("goods");
var tr = document.createElement("tr");
tr.innerHTML = "<td>"+name+"</td> "+
"<td>"+price+"</td> "+
"<td align='center'> "+
"<input type='button' value='-' onclick=\"remove_one(this)\" /> "+
"<input type='text' size='3' readonly value='1'/> "+
"<input type='button' value='+' onclick=\"add_one(this)\" /> "+
"</td> "+
"<td>"+price+"</td> "+
"<td align='center'><input type='button' value='x' onclick=\"delete1(this)\"/></td>";
tbody.appendChild(tr);
}

total_price();
}

function find(str){
var tbody = document.getElementById("goods");
var trs = tbody.getElementsByTagName("tr");
//console.log(str+"length:"+trs.length);

for(var i=0;i<trs.length;i++){
var td_name = trs[i].childNodes[0];
var name = td_name.innerText;
//console.log(name);
if(str==name){
add(trs[i]);
return true;
}
}
return false;
}

function add(tr) {
var tds = tr.getElementsByTagName("td");

var td_price = tds[1];
var price = parseInt(td_price.innerText);

var td_count = tds[2];
var input = td_count.getElementsByTagName("input")[1];
var num = parseInt(input.value);

var td_value = tds[3];
var value = parseInt(td_value.innerText);

num ++;
value += price;

input.value = num;
td_value.innerText = value;

total_price();

}

function delete1(ele){
var eleTr = ele.parentNode.parentNode;
eleTr.parentNode.removeChild(eleTr);

total_price();
}

function remove_one(ele) {
var tr = ele.parentNode.parentNode;
var tds = tr.getElementsByTagName("td");

var td_price = tds[1];
var price = parseInt(td_price.innerText);

var td_count = tds[2];
var input = td_count.getElementsByTagName("input")[1];
var num = parseInt(input.value);

var td_value = tds[3];
var value = parseInt(td_value.innerText);

//alert(price+num+value);

if(num>1){
num--;
value-=price;

input.value = num;
td_value.innerText = value;
}

total_price();
}

function add_one(ele) {
var tr = ele.parentNode.parentNode;
var tds = tr.getElementsByTagName("td");

var td_price = tds[1];
var price = parseInt(td_price.innerText);

var td_count = tds[2];
var input = td_count.getElementsByTagName("input")[1];
var num = parseInt(input.value);

var td_value = tds[3];
var value = parseInt(td_value.innerText);

num ++;
value += price;

input.value = num;
td_value.innerText = value;

total_price();
}

function total_price(){
var total = document.getElementById("total");

var tbody = document.getElementById("goods");
var trs = tbody.getElementsByTagName("tr");

//alert(111);

var sum = 0;
for(var i=0;i<trs.length;i++){
var td_price = trs[i].getElementsByTagName("td")[3];
//console.log(td_price);
var price = parseInt(td_price.innerText);
//console.log(price);
//console.log(trs.length);
sum += price;
}
//console.log(sum);
total.innerHTML = sum;
}


gwc1.html

<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
<meta charset="utf-8" />
<style type="text/css">
h1 {
text-align:center;
}
table {
margin:0 auto;
width:60%;
border:2px solid #aaa;
border-collapse:collapse;
}
table th, table td {
border:2px solid #aaa;
padding:5px;
}
th {
background-color:#eee;
}
</style>
<script src="gwc1.js" type="text/javascript"></script>
</head>
<body>
<h1>真划算</h1>
<table>
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>颜色</th>
<th>库存</th>
<th>好评率</th>
<th>操作</th>
</tr>
<tr>
<td>罗技M185鼠标</td>
<td>80</td>
<td>黑色</td>
<td>893</td>
<td>98%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>微软X470键盘</td>
<td>150</td>
<td>黑色</td>
<td>9028</td>
<td>96%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>洛克iphone6手机壳</td>
<td>60</td>
<td>透明</td>
<td>672</td>
<td>99%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>蓝牙耳机</td>
<td>100</td>
<td>蓝色</td>
<td>8937</td>
<td>95%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>金士顿U盘</td>
<td>70</td>
<td>红色</td>
<td>482</td>
<td>100%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
</table>

<h1>购物车</h1>
<table>
<thead>
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>数量</th>
<th>金额(元)</th>
<th>删除</th>
</tr>
</thead>
<tbody id="goods">
<!--
<tr>
<td>罗技M185鼠标</td>
<td>80</td>
<td align="center">
<input type="button" value="-" onclick="remove_one(this);"/>
<input type="text" size="3" readonly value="1"/>
<input type="button" value="+" onclick="add_one(this);"/>
</td>
<td>80</td>
<td align="center"><input type="button" value="x" onclick="delete1(this);"/></td>
</tr>
-->
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right">总计</td>
<td id="total"></td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航