我有2个文本字段Name
和Phone
的简单表单,并且可以在点击Add new
按钮时添加新字段。你可以在这里参考jsfiddle。
我的问题是如何在不按Add New
按钮的情况下添加新文本字段?当用户填写Text Input name
和Text Input Phone
时,系统会自动添加新行<tr class="person">
。
我的第二个问题是我不知道如何编写删除代码。
更新:我还想设置最大克隆,可以这样做吗?
答案 0 :(得分:3)
如果通过“填充”表示“当用户输入与”电话“字段允许的字符数一样多时”,则可以在输入中添加maxlength="10"
属性(根据需要设置值):
<input type="text" name="phone[]" id="phone" maxlength="10"/>
...并在keyup
事件中添加一个处理程序,用于检查当前值是否已达到maxlength
:
$('input[name="phone\[\]"]').keyup(function() {
if (this===$('input[name="phone\[\]"]').last()[0]
&& this.value.length===+$(this).attr("maxlength")) {
$("#add").click();
}
});
请注意,如果用户在最后一行输入,您可能只想进行此测试,因此上面是if
测试的第一部分。
此外,您可能希望新克隆的字段为空,因此您可以在添加功能中执行此操作:
$('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last')
.find("input").val("");
要设置最大行数,您可以在添加功能中添加测试:
$("#add").click(function() {
var $lastRow = $('#mytable tbody>tr:last');
if ($lastRow.index() < 10) { // set maximum rows here
$lastRow.clone(true).insertAfter($lastRow).find("input").val("");
}
return false;
});
另请注意,您不需要为这些输入提供id
属性,但如果您这样做,则不应在克隆时复制它,因为id
应该是唯一的。
对于删除功能,请为每行添加删除按钮:
<td><input type="button" class="deleteRow" value="Delete"/></td>
......然后:
$("#mytable").on("click","input.deleteRow", function(){
if ($("#mytable tr").length > 2) // don't delete the last row
$(this).closest("tr").remove();
});
答案 1 :(得分:0)
您可以在blur
以及添加新按钮上执行此操作。另外要注意重复的id,而是使用类:
<tr class="person">
<td><input type="text" name="name[]" class="name" /></td>
<td><input type="text" name="phone[]" class="phone" /></td>
</tr>
然后在jQuery中:
$('.phone').blur(function() {
var ppl = $('.person').length;
if ( this.value && ppl < 5 ) { // Max 5 people
$(this).closest('tr').clone(true)
.insertAfter('#mytable tr:last')
.find('input').val('').first().focus();
$(this).off('blur');
}
});
演示: http://jsfiddle.net/elclanrs/YEBQt/(从输入到输入的标签)
答案 2 :(得分:0)
我会扩展enclares - 我会为每个文本框使用.blur()
,并且每次检查并确保每个值都不是“” - 这将确保两者都被填充
然后在jQuery中:
$(document).ready(function() {
$(".phone").blur(function() {
var phonetxt = $('.phone'.val();
var nametxt = $('.name').val();
if ( phonetxt != "" && nametxt != "" ){
$(this).closest('tr').clone(true)
.insertAfter('#mytable tr:last')
.find('input').val('').first().focus();
});
}
$(".name").blur(function() {
var phonetxt = $('.phone'.val();
var nametxt = $('.name').val();
if ( phonetxt != "" && nametxt != "" ){
$(this).closest('tr').clone(true)
.insertAfter('#mytable tr:last')
.find('input').val('').first().focus();
});
}
});