jQuery実装リストのデジタル加減ボックス&JSON化データ
2921 ワード
前言
プロジェクトのニーズに応じて簡単な小さな効果を作り、まず効果図をアップします.
コード#コード#
ページとJSのコードを直接貼り付けます.
まとめ
簡単な小さな効果で、form以外のデータの提出方法を提供しています.参考にしてください.The End.
プロジェクトのニーズに応じて簡単な小さな効果を作り、まず効果図をアップします.
コード#コード#
ページと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" onclick="numDec(this);">-</span>
<input id="a1" type="text" value="5" />
<span onclick="numAdd(this);">+</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox" value="02"/>
</td>
<td><span onclick="numDec(this);">-</span>
<input id="a2" type="text" value="6" />
<span onclick="numAdd(this);">+</span></td>
</tr>
<tr>
<td>
<input type="checkbox" value="03"/>
</td>
<td><span onclick="numDec(this);">-</span>
<input id="a3" type="text" value="7" />
<span onclick="numAdd(this);">+</span></td>
</tr>
<tr>
<td>
<input type="checkbox" value="04"/>
</td>
<td><span onclick="numDec(this);">-</span>
<input id="a4" type="text" value="8" />
<span onclick="numAdd(this);">+</span></td>
</tr>
</table>
<button onclick="fun1();"> </button>
</body>
</html>まとめ
簡単な小さな効果で、form以外のデータの提出方法を提供しています.参考にしてください.The End.