javascript - 我需要 10 行而不是 1
问题描述
我制作了这段代码,每次单击按钮时都会添加一个新行,但我想从 10 行而不是 1 行开始。有谁知道我该怎么做?
$(document).ready(function() {
var max_fields = 15; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div><a href="#" class="remove_field">Regel verwijderen</a><input type="text" name="mytext[]" class="text"/></div>'); //add input box
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="width">
<form>
<div class="input_fields_wrap">
<input type="button" name="plus" value="Regel toevoegen" class="add_field_button btn">
<div><input type="text" name="mytext[]" class="text"></div>
</div>
<input type="submit" name="submit" value="Done" class="submit btn">
</div>
</form>
解决方案
$(document).ready(function () {
var defrow = 10 // default rows
var max_fields = 15 // maximum input boxes allowed
var wrapper = $('.input_fields_wrap') // Fields wrapper
var add_button = $('.add_field_button') // Add button ID
var x = 1 // initlal text box count
Array(defrow)
.fill()
.forEach(function () {
$(wrapper).append(
'<div><a href="#" class="remove_field">Regel verwijderen</a><input type="text" name="mytext[]" class="text"/></div>'
) // add input box
})
$(add_button).click(function (e) {
// on add input button click
e.preventDefault()
if (x < max_fields) {
// max input box allowed
x++ // text box increment
$(wrapper).append(
'<div><a href="#" class="remove_field">Regel verwijderen</a><input type="text" name="mytext[]" class="text"/></div>'
) // add input box
}
})
$(wrapper).on('click', '.remove_field', function (e) {
// user click on remove text
e.preventDefault()
$(this)
.parent('div')
.remove()
x--
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add_field_button">button</button>
<div class="input_fields_wrap"></div>
我添加此代码:
Array(defrow)
.fill()
.forEach(function () {
$(wrapper).append(
'<div><a href="#" class="remove_field">Regel verwijderen</a><input type="text" name="mytext[]" class="text"/></div>'
) // add input box
})
推荐阅读
- amazon-web-services - 来自 S3 对象创建通知的 AWS Lambda 触发器
- javascript - 多个下拉菜单在导航栏中不起作用
- python - 构建自定义单词相似度
- python - 如果不连续有效地添加行:无法从重复轴重新索引
- python - Numpy ValueError:操作数无法与形状一起广播 (148912,8) (6,) (148912,8)
- eclipse - 在 Eclipse HANA 视图中针对计算视图执行 SQL SELECT 语句时如何指定客户端?
- json - 如何从 JSON 密钥中删除句点?
- javascript - 加载资源失败:服务器响应状态为 400()
- python - 使用 Pillow 为图像添加水印
- ios - Xcode tableView didSelectRowAt 无法正常工作