一页上有多个添加/删除行

Question

这里已经有关于这个主题的变化，但没有完全对应的。然而，这个问题必须经常出现。

我需要在单个页面上添加/删除多个表行。我在网上对此进行了大量研究，并且有很多示例适用于单个表，但是一旦添加第二个表，一切都会变得疯狂。这应该是依赖每个表的ID的简单问题，但我无法做到这一点，而且我真的不想在我的页面上重复大块的jquery代码。

这是jquery，它主要取自在线演示。我知道我正在为我的表重复ID，所以我故意发布此代码留下此错误。

jQuery(document).delegate('a.add-record', 'click', function(e) {
			e.preventDefault();    
			var content = jQuery('#sample_table tr'),
			size = jQuery('#tbl_posts >tbody >tr').length + 1,
			element = null,    
			element = content.clone();
			element.attr('id', 'rec-'+size);
			element.find('.delete-record').attr('data-id', size);
			element.appendTo('#tbl_posts_body');
		});

		jQuery(document).delegate('a.delete-record', 'click', function(e) {
			e.preventDefault();    
			var id = jQuery(this).attr('data-id');
			var targetDiv = jQuery(this).attr('targetDiv');
			jQuery('#rec-' + id).remove();
			return true;
		});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<!----------START TABLE 1 HERE---------->
	<form enctype="multipart/form-data">
		<table class="table table-bordered third" id="tbl_posts">
			<thead>
			<tr>
			<div class="well clearfix">
	    		<td colspan="4">
				<a class="btn btn-primary pull-right add-record" data-added="0"><div class="button" width="100%">CLICK TO ADD A ROW</div></a>
				</td>
			</div>
	</tr>
	</thead>
<tbody id="tbl_posts_body">
<TR id="rec-1">
<TD>
<input type="text" name="something[]">
</TD>
<TD>
<input type="text" name="somethingelse[]">
</TD>			
<TD>
<input type="text" name="somethingelseagain[]">
</TD>
<TD>
<a class="btn btn-xs delete-record" data-id="1">REMOVE</a>
</TD>
</TR>
	</tbody>
	</table>
	</form>

	<!----------TABLE 1 NEW ROWS---------->
	<div style="display:none;">
	<table id="sample_table">
			<tbody id="tbl_posts_body">
		    <tr id="">
			<TD>
			<input type="text" name="something[]"></input>
			</TD>
			<TD>
			<input type="text" name="somethingelse[]">
			</TD>			
			<TD>
			<input type="text" name="somethingelseagain[]">
			</TD>
			<TD>
			<a class="btn btn-xs delete-record" data-id="1">REMOVE</a>
			</td>
			</TR>
	</tbody>
	</table>
	</div>
	<!----------END TABLE 1 HERE---------->
	<BR><HR><BR>
	<!----------START TABLE 2 HERE---------->
	<form enctype="multipart/form-data">
		<table class="table table-bordered third" id="tbl_posts">
			<thead>
			<tr>
			<div class="well clearfix">
	    		<td colspan="4">
				<a class="btn btn-primary pull-right add-record" data-added="0"><div class="button" width="100%">CLICK TO ADD A ROW</div></a>
				</td>
			</div>
	</tr>
	</thead>
<tbody id="tbl_posts_body">
<TR id="rec-1">
<TD>
<input type="text" name="something[]">
</TD>
<TD>
<input type="text" name="somethingelse[]">
</TD>			
<TD>
<input type="text" name="somethingelseagain[]">
</TD>
<TD>
<a class="btn btn-xs delete-record" data-id="1">REMOVE</a>
</TD>
</TR>
	</tbody>
	</table>
	</form>

	<!----------TABLE 2 NEW ROWS---------->
	<div style="display:none;">
	<table id="sample_table">
			<tbody id="tbl_posts_body">
		    <tr id="">
			<TD>
			<input type="text" name="something[]"></input>
			</TD>
			<TD>
			<input type="text" name="somethingelse[]"></input>
			</TD>			
			<TD>
			<input type="text" name="somethingelseagain[]"></input>
			</TD>
			<TD>
			<a class="btn btn-xs delete-record" data-id="1">REMOVE</a>
			</td>
			</TR>
	</tbody>
	</table>
	</div>
	<!----------END TABLE 2 HERE---------->

Answer 1

下面的代码将适用于任意数量的表。

根据要求，我在使用类.demo-row隐藏的每个表中创建了演示行。通过单击.add-record将触发一个事件，该事件使用类.demo-row搜索嵌入在.first()行中的表，然后将其复制到变量中并删除.demo-row类(以便显示)。然后，它将其.appends到相关表。

.delete-record的操作类似，使用.closest(tr)查找嵌入的行并通过.remove()将其删除。您需要使用$(document).on("click",...才能将 click 事件应用于动态创建元素。

$(".add-record").click( function() {
row = $(this).closest("table").find("tbody").first().find("tr.demo-row").first().clone().removeClass("demo-row");

$(this).closest("table").find("tbody").first().append( row );
});
$(document).on("click", "a.delete-record" , function() {
$(this).closest("tr").remove();
});

tr.demo-row {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<form enctype="multipart/form-data">
		<table class="table table-bordered third" id="tbl_posts">
			<thead>
			<tr>
			<div class="well clearfix">
	    		<td colspan="4">
				<a class="btn btn-primary pull-right add-record" data-added="0"><div class="button" width="100%">CLICK TO ADD A ROW</div></a>
				</td>
			</div>
	</tr>
	</thead>
<tbody id="tbl_posts_body">

<TR class="demo-row">
<TD>
I like pears.
</TD>
<TD>
<input type="text" name="somethingelse[]">
</TD>			
<TD>
<input type="text" name="somethingelseagain[]">
</TD>
<TD>
<a class="btn btn-xs delete-record" data-id="1">REMOVE</a>
</TD>
</TR>

<TR id="rec-1">
<TD>
I like pears.
</TD>
<TD>
<input type="text" name="somethingelse[]">
</TD>			
<TD>
<input type="text" name="somethingelseagain[]">
</TD>
<TD>
<a class="btn btn-xs delete-record" data-id="1">REMOVE</a>
</TD>
</TR>
	</tbody>
	</table>
	</form>



	<form enctype="multipart/form-data">
		<table class="table table-bordered third" id="tbl_posts">
			<thead>
			<tr>
			<div class="well clearfix">
	    		<td colspan="4">
				<a class="btn btn-primary pull-right add-record" data-added="0"><div class="button" width="100%">CLICK TO ADD A ROW</div></a>
				</td>
			</div>
	</tr>
	</thead>
<tbody id="tbl_posts_body">
<TR class="demo-row">
<TD>
I like apples.
</TD>
<TD>
<input type="text" name="somethingelse[]">
</TD>			
<TD>
<input type="text" name="somethingelseagain[]">
</TD>
<TD>
<a class="btn btn-xs delete-record" data-id="1">REMOVE</a>
</TD>
</TR>
<TR id="rec-1">
<TD>
I like apples.
</TD>
<TD>
<input type="text" name="somethingelse[]">
</TD>			
<TD>
<input type="text" name="somethingelseagain[]">
</TD>
<TD>
<a class="btn btn-xs delete-record" data-id="1">REMOVE</a>
</TD>
</TR>
	</tbody>
	</table>
	</form>


	<!----------NEW ROWS---------->
	<div style="display:none;">
	<table id="sample_table">
			<tbody id="tbl_posts_body">
		    <tr id="">
			<TD>
			<input type="text" name="something[]"></input>
			</TD>
			<TD>
			<input type="text" name="somethingelse[]"></input>
			</TD>			
			<TD>
			<input type="text" name="somethingelseagain[]"></input>
			</TD>
			<TD>
			<a class="btn btn-xs delete-record" data-id="1">REMOVE</a>
			</td>
			</TR>
	</tbody>
	</table>
	</div>