我有带有 2 个文本字段的简单表单,Name
并且可以在单击按钮Phone
时添加新字段。Add new
你可以参考这里jsfiddle。
我的问题是如何在不按下Add New
按钮的情况下添加新的文本字段?当用户填写Text Input name
并Text Input Phone
新行将<tr class="person">
自动添加。
我的第二个问题是我不确定如何编写删除代码。
更新:我也想设置最大克隆,可以这样做吗?
我有带有 2 个文本字段的简单表单,Name
并且可以在单击按钮Phone
时添加新字段。Add new
你可以参考这里jsfiddle。
我的问题是如何在不按下Add New
按钮的情况下添加新的文本字段?当用户填写Text Input name
并Text Input Phone
新行将<tr class="person">
自动添加。
我的第二个问题是我不确定如何编写删除代码。
更新:我也想设置最大克隆,可以这样做吗?
如果“填充”是指“当用户输入电话字段允许的尽可能多的字符时”,那么您可以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
上面测试的第一部分。
此外,您可能希望新克隆的字段为空白,因此您可以在 add 函数中执行此操作:
$('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last')
.find("input").val("");
要设置最大行数,您可以在 add 函数中进行测试:
$("#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();
});
演示:http: //jsfiddle.net/3J65U/15/
您可以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/(从输入到输入的选项卡)
I would expand on enclares - I would use .blur()
for each textbox , and each time check and make sure each value is not "" - that would make sure both are filled
Then in 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();
});
}
});