js实现购物车数量的增加与减少,js实现购物车数量的自增与自减
2014-11-14 21:11
423 查看
js实现购物车数量的增加与减少,js实现购物车数量的自增与自减
<!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>js实现购物车数量的增加与减少,js实现购物车数量的自增与自减</title> </head> <body> <center> <table> <tr> <td>1</td> <td><span onclick="changeNum(this,1)" style="cursor:pointer;">+</span><input type="text" value="" onblur="checknum(this)" /><span onclick="changeNum(this,-1)" style="cursor:pointer;">-</span></td> </tr> <tr> <td>2</td> <td><span onclick="changeNum(this,1)" style="cursor:pointer;">+</span><input type="text" value="" onblur="checknum(this)" /><span onclick="changeNum(this,-1)" style="cursor:pointer;">-</span></td> </tr> <tr> <td>3</td> <td><span onclick="changeNum(this,1)" style="cursor:pointer;">+</span><input type="text" value="" onblur="checknum(this)" /><span onclick="changeNum(this,-1)" style="cursor:pointer;">-</span></td> </tr> </table> </center> <script type="text/javascript"> function checknum(obj){ if(obj.value >10){ obj.value = 10; alert('Max 10!'); } } function changeNum(obj,num) { var input = getParent(obj).getElementsByTagName("input"); for(var i=0;i<input.length;i++) { if(input[i].type=="text") { if(input[i].value == "") input[i].value = num; else input[i].value = input[i].value - 0 + num; } if(input[i].value == "-1") input[i].value = 0; if(input[i].value == "11") input[i].value = 10; } } //获取父级对像 function getParent(obj) { if(typeof(obj) != "object"){obj = document.getElementById(obj);} if(obj) return obj.parentElement || obj.parentNode; } </script> </body> </html>
相关文章推荐
- Android实现仿淘宝购物车增加和减少商品数量功能demo示例
- js——input框实现淘宝一样的点击后商品数量的增加和减少
- js实现购物车数量的自增与自减
- js实现购物车数量的自增与自减
- ECSHOP商品购买数量增加加减按钮插件(包含购物车商品数量增加减少,自动更新)
- 购物车中数量增加与减少 根据数量改变总体价格 限制输入框输入其他非数字
- 简单购物车(增加数量和减少数量)
- styleSheets以及js中实现样式表的切换、样式的增加减少
- 购物车增加、减少商品时动画效果:jQuery.Fly.js插件使用方法
- JSP类似购物车根据后台数据自动生成一行商品,点击按钮实现数量价格自动增加
- 仿淘宝购物车demo---增加和减少商品数量
- jquery来实现的添加商品和减少商品数量,用于购物车等实时改变价格
- 仿淘宝购物车demo---增加和减少商品数量
- 购物车可增加减少数量可添加
- document.styleSheets以及js中实现样式表的切换、样式的增加减少
- js简单实现表单中点击按钮动态增加输入框数量的方法
- jQuery实现购物车物品数量的加减(减到1时不能减少)
- 类似于购物车,点击按钮,购物数量的增加或者减少
- document.styleSheets以及js中实现样式表的切换、样式的增加减少