简单购物车(增加数量和减少数量)
2015-01-16 13:55
295 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml"> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
<title>购物车</title> |
<script> | |
function add(addObj){ | |
//获取当前节点的父节点td | |
var tdObj=addObj.parentNode; | |
//循环td节点下的所有节点,以找到记录数量的文本节点 | |
for(var i=0;i<tdObj.childNodes.length;i++){ | |
var inputObj=tdObj.childNodes[i]; | |
if(inputObj.nodeName=='INPUT'&&inputObj.type=='text'){ | |
//获取文本节点下的值并执行自增,再赋值给文本框 | |
var val=inputObj.value; | |
val++; | |
inputObj.value=val; | |
} | |
} | |
total(); | |
} | |
function sub(subObj){ | |
var tdObj=subObj.parentNode; | |
for(var i=0;i<tdObj.childNodes.length;i++){ | |
var inputObj=tdObj.childNodes[i]; | |
if(inputObj.nodeName=='INPUT'&&inputObj.type=='text'){ | |
var val=inputObj.value; | |
//减到0的时候不允许再减 | |
if(val>0){ | |
val--; | |
} | |
inputObj.value=val; | |
} | |
} | |
total(); | |
} | |
function total(){ | |
var total=0; | |
//获取table对象 | |
var tableObj=document.getElementById("table"); | |
//获取tr节点列表 | |
var trObj=tableObj.getElementsByTagName("tr"); | |
//从第二行开始循环 | |
for(var i=1;i<trObj.length;i++){ | |
//获取td节点列表 | |
var tdObj=trObj[i].getElementsByTagName("td"); | |
//获取单价 | |
var price=tdObj[1].innerHTML; | |
//获取数量 | |
var num=tdObj[2].getElementsByTagName("input")[1].value; | |
var sum=parseFloat(price)*parseFloat(num); | |
tdObj[3].innerHTML=sum.toFixed(2); | |
//总计 | |
total+=sum; | |
} | |
document.getElementById("total").innerHTML=total.toFixed(2); | |
} | |
</script> | |
</head> | |
<body> | |
<table id="table" border="1" align="center" style="text-align:center"> | |
<tr> | |
<td>产品</td> | |
<td>单价</td> | |
<td>数量</td> | |
<td>小计</td> | |
</tr> | |
<tr> | |
<td>冻冻果</td> | |
<td>10.00</td> | |
<td> | |
<input type="button" value="+" onclick="add(this);"/> | |
<input style="width:20px;" type="text" readonly="readonly" value="1"/> | |
<input type="button" value="-" onclick="sub(this);"/> | |
</td> | |
<td>10.00</td> | |
[b]</tr> | |
<tr> | |
<td>冰绿茶</td> | |
<td>3.00</td> | |
<td> | |
<input type="button" value="+" onclick="add(this);"/> | |
<input type="text" style="width:20px;" readonly="readonly" value="1"/> | |
<input type="button" value="-" onclick="sub(this);"/> | |
</td> | |
<td>3.00</td> | |
</tr> | |
</table> | |
<div align="center"> | |
总计:<span id="total">13.00</span> | |
</div> | |
</body> | |
</html> |
相关文章推荐
- 仿淘宝购物车demo---增加和减少商品数量
- 购物车可增加减少数量可添加
- ECSHOP商品购买数量增加加减按钮插件(包含购物车商品数量增加减少,自动更新)
- js实现购物车数量的增加与减少,js实现购物车数量的自增与自减
- 仿淘宝购物车demo---增加和减少商品数量
- 简单封装一个组件:购买数量,带减少增加按钮AmountView
- Android实现仿淘宝购物车增加和减少商品数量功能demo示例
- 类似于购物车,点击按钮,购物数量的增加或者减少
- 购物车中数量增加与减少 根据数量改变总体价格 限制输入框输入其他非数字
- 系统消息数量的增加及减少!
- jquery 动态增加,减少input表单的简单方法(必看)
- jquery按钮控制text文本框商品数量增加或减少
- Android自定义控件之高仿京东购物车添加或者减少商品数量功能
- jquery按钮控制text文本框商品数量增加或减少
- JSP类似购物车根据后台数据自动生成一行商品,点击按钮实现数量价格自动增加
- 商品详情页中的数量的增加与减少
- magento购物车添加减少数量 实时更新购物车
- js——input框实现淘宝一样的点击后商品数量的增加和减少
- 织梦Dedecms5.7整站调用购物车订单数量简单解决办法
- 购物车的单项增加减少商品和批量减少增加商品以及清空购物车的实例演示