使用javascript或jquery的动态范围类型表单
使用javascript或jquery的动态范围类型表单
提问于 2016-08-12 05:56:38
我有个问题。
我希望表单在单击+按钮时动态增加，单击-按钮时删除。
我的表格应该是这样的：
0-2公里输入表格+-
2-4公里输入表格+-
4-6公里输入表格+-
6-8公里输入表格+-
8-10公里输入表格+-
10+输入表格
如何使用jquery或javascript生成这样的动态表单？
提前感谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-08-12 06:47:07
对于jQuery和事件委托来说，这非常简单。您想要做的是在HTML中构建默认控件，然后为加号和减号委派事件，以便动态地从HTML中添加或删除行。
请参阅下面的片段：
//add
$(".items").on("click", ".plus", function() {
var oldItem = $(this).closest(".item");
var item = oldItem.clone();
item.insertAfter(oldItem);
var index = item.index();
var start = index * 2;
var label = item.find("label");
label.text(start + '-' + (start + 2) + 'km');
});
//remove
$(".items").on("click", ".minus", function() {
$(this).closest(".item").remove();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="items">
<div class="item">
<label>0-2km</label>
<input type="text" />
<input type="button" class="plus" value="+" />
<input type="button" class="minus" value="-" />
</div>
Stack Overflow用户
发布于 2016-08-12 06:25:25
无论我从你的问题中了解到什么，这就是你想要的，代码在这里
<html>
<head>
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var a=0;
var b=2;
$(document).ready(function(){
$("#btn1").on('click',function(){
a=a+2;
b=b+2;
var c=a+"-"+b;
$("#field").val(c);
});
$("#btn2").on('click',function(){
a=a-2;
b=b-2;
var c=a+"-"+b;
$("#field").val(c);
});
});
</script>
</head>
<body>
<p><input type="text" value="0-2" id="field"/>kms<input type="button" id="btn1" value="+"><input type="button" id="btn2" value="-"></p>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38910897
复制相关文章
相似问题
腾讯云开发者
