前言
根据项目需求做了个很简单的小效果,先上效果图:
代码
直接贴上页面和JS的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
function numDec(sp){
var num_dec = parseInt($(sp).next().val())-1;
if(num_dec<1){
alert("小组人数必须大于0!");
}else{
$(sp).next().val(num_dec);
}
}
function numAdd(sp){
var num_dec = parseInt($(sp).prev().val())+1;
$(sp).prev().val(num_dec);
}
function fun1(){
var jsonStr = "[";
for(var i = 0;i<$("#trr tr").length;i++){
var number = $("#trr tr:eq("+i+")").children().eq(0).find("input").val();
jsonStr += "{\"number\":\""+number+"\",";
var count = $("#trr tr:eq("+i+")").children().eq(1).find("input").val();
jsonStr +="\"count\":\""+count+"\"},";
}
jsonStr = jsonStr.substring(0,jsonStr.length-1)+"]";
console.info(jsonStr)
}
</script>
</head>
<body>
<table id="trr">
<tr>
<td>
<input type="checkbox" value="01"/>
</td>
<td><span id="sp1" οnclick="numDec(this);">-</span>
<input id="a1" type="text" value="5" />
<span οnclick="numAdd(this);">+</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox" value="02"/>
</td>
<td><span οnclick="numDec(this);">-</span>
<input id="a2" type="text" value="6" />
<span οnclick="numAdd(this);">+</span></td>
</tr>
<tr>
<td>
<input type="checkbox" value="03"/>
</td>
<td><span οnclick="numDec(this);">-</span>
<input id="a3" type="text" value="7" />
<span οnclick="numAdd(this);">+</span></td>
</tr>
<tr>
<td>
<input type="checkbox" value="04"/>
</td>
<td><span οnclick="numDec(this);">-</span>
<input id="a4" type="text" value="8" />
<span οnclick="numAdd(this);">+</span></td>
</tr>
</table>
<button οnclick="fun1();">提交</button>
</body>
</html>
总结
很简单的一个小效果,提供了除form外的另一种数据提交方式,仅供参考,The End。