<!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>
时间： 2024-11-03 03:42:55