实现了一个dom数组 值叠加效果


实现了一个dom数组 值叠加效果 直接可以粘贴代码到对应的html中看实际效果,简单实用,并且可以无限添加输入框。

<!DOCTYPE HTML>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title>计算总数</title>
</head>
<body>
<form action=”” id=”J_total”>
<p><input type=”text” name=”num[]” placeholder=”请输入数量” value=”0″ onblur=”getTotal(‘J_total’);”></p>
<p><input type=”text” name=”num[]” placeholder=”请输入数量” value=”0″ onblur=”getTotal(‘J_total’);”></p>
<p><input type=”text” name=”num[]” placeholder=”请输入数量” value=”0″ onblur=”getTotal(‘J_total’);”></p>
</form>
<button id=”J_addInput”>点我新增输入框</button><br>
总数:<input type=”text” name=”total” id=”J_totalNum” value=”0″ readonly>
<script src=”http://code.jquery.com/jquery-1.8.2.min.js”></script>
<script>
function getTotal(id){
var inps = $(“#” + id + ” input[name=’num[]’]”);
var t = 0;
inps.each(function(i){
t += parseInt($(inps[i]).val());
});
$(“#J_totalNum”).val(t);
}
$(function(){
var add = $(“#J_addInput”),
form = $(“#J_total”),
inp = ‘<input type=”text” name=”num[]” placeholder=”请输入数量” value=”0″ onblur=”getTotal(\’J_total\’);”>’;
add.click(function(){
var np = $(“<p>”);
np.html(inp);
np.appendTo(form);
});
});
</script>
</body>
</html>

,

发表评论

3 + 7 = ?