jQuery 实现列表中的数字加减框&JSON化数据

最新推荐文章于 2021-11-13 16:34:47 发布

小灯光环

最新推荐文章于 2021-11-13 16:34:47 发布

阅读量7.1k

点赞数 6

分类专栏： jQuery

本文链接：https://blog.csdn.net/wlwlwlwl015/article/details/49991573

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

根据项目需求做了个很简单的小效果，先上效果图：

代码

直接贴上页面和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>