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>

posted @ 2014-11-14 21:11 小鱼阁工作室阅读(2887) 评论(0) 编辑收藏举报

刷新页面返回顶部

js实现购物车数量的增加与减少，js实现购物车数量的自增与自减

公告