[英]jQuery - Append() is not working to add a button on Clicking an element
[英]jQuery: append table rows dynamically upon clicking 'Add' button
我有这个 html 表单,我在其中为项目字段添加了一个按钮。
<form>
<table width="50%" align="center">
<tr>
<td>Amount</td>
<td><input type="number" name="amount" id="amount" required></td>
</tr>
<tr>
<td>Buyer</td>
<td><input type="text" name="buyer" id="buyer" maxlength="255" required></td>
</tr>
<tr>
<td>Receipt Id</td>
<td><input type="text" name="receipt_id" name="receipt_id" maxlength="20" required></td>
</tr>
<tr class="input_fields_wrap">
<td>Items</td>
<td><input type="text" name="items[]" class="items" required> <button class="add_field_button">Add+</button></td>
</tr>
<tr>
<td>Buyer Email</td>
<td><input type="email" name="buyer_email" id="buyer_email" required></td>
</tr>
<tr>
<td>Note</td>
<td><input type="text" name="note" id="note" maxlength="30" required></td>
</tr>
<tr>
<td>City</td>
<td><input type="text" name="city" id="city" maxlength="20" required></td>
</tr>
<tr>
<td>Phone</td>
<td><input type="text" name="phone" id="phone" required></td>
</tr>
<tr>
<td>Entry By</td>
<td><input type="text" name="entry_by" id="entry_by" required></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="submit" value="Recrod Sales"></td>
</tr>
</table>
</form>
现在,我想该项目现场后新增的项目领域的另一个副本
为此,我使用了这个 jQuery:
var max_fields = 10; //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
var form = '<div><tr><td>Items</td><td><input type="text" name="items[]" class="items" required> <button class="add_field_button">Add+</button></td></tr><a href="#" class="remove_field">Remove</a></div>';
//$(wrapper).append(form); //add input box
$(form).after(wrapper);
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
但是当我按下那个 add(+) 按钮时,它没有按预期工作。 你能告诉我我该怎么做吗?
谢谢。
简单的.insertAfter()
不会为您解决问题吗? :
const itemHtml = `<tr class="input_fields_wrap"><td>Items</td><td><input type="text" name="items[]" class="items" required> <button class="add_field_button">Add+</button></td></tr>`; $('form').on('click', '.add_field_button', function(event){ event.preventDefault(); $(itemHtml).insertAfter($(event.target).closest('tr')); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form><table width="50%" align="center"><tr><td>Amount</td><td><input type="number" name="amount" id="amount" required></td></tr><tr><td>Buyer</td><td><input type="text" name="buyer" id="buyer" maxlength="255" required></td></tr><tr><td>Receipt Id</td><td><input type="text" name="receipt_id" name="receipt_id" maxlength="20" required></td></tr> <tr class="input_fields_wrap"><td>Items</td><td><input type="text" name="items[]" class="items" required> <button class="add_field_button">Add+</button></td></tr> <tr><td>Buyer Email</td><td><input type="email" name="buyer_email" id="buyer_email" required></td></tr><tr><td>Note</td><td><input type="text" name="note" id="note" maxlength="30" required></td></tr><tr><td>City</td><td><input type="text" name="city" id="city" maxlength="20" required></td></tr><tr><td>Phone</td><td><input type="text" name="phone" id="phone" required></td></tr><tr><td>Entry By</td><td><input type="text" name="entry_by" id="entry_by" required></td></tr><tr><td> </td><td><input type="submit" name="submit" value="Recrod Sales"></td></tr></table></form>
代码中的$(add_button)
需要是add_button
,因为add_button
已经是一个 jQuery 对象。
注意:作为一个很好的约定,保存一个变量名以$
开头的 jQuery 对象。
要添加元素,您可以使用clone()
方法,因此 jQuery 避免删除当前元素。 像这样:
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap").clone(); //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
var form = $(`
<div>
<tr class="input_fields_wrap"><td>Buyer Email</td><td>
<input type="email" name="buyer_email" id="buyer_email" required>
</td></tr>
<a href="#" class="remove_field">Remove</a>
</div>';
`)
//$(wrapper).append(form); //add input box
$('form').after(wrapper);
}
});
对于删除部分,没有类.remove_field
元素,所以先看看这个。
尝试这个
var itemHtml='<tr class="input_fields_wrap">
<td>Items</td>
<td><input type="text" name="items[]" class="items" required></td>
</tr>';
$('.add_field_button').click(function(){
$(itemHtml).insertAfter($(this).closest('tr'));
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.