文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在一个页面上添加/删除多个行

问在一个页面上添加/删除多个行
EN

Stack Overflow用户
提问于 2018-12-08 12:27:49
回答 1查看 39关注 0票数 0

这里已经有关于这个主题的变化，但没有完全对应的东西。然而，这个问题必须提出很多。

我需要在一个页面上添加/删除多个表行。我在网上已经做了很多研究，有很多例子可以很好地应用于单个表，但是一旦添加了第二个表，一切都会变得疯狂。对于每个表来说，这应该是一个简单的依赖ID的问题，但是我还没有做到这一点，我真的不想在我的页面上重复大量的jquery代码。

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

​

代码语言：javascript
复制
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;
		});
代码语言：javascript
复制
<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---------->

​

jquery
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-12-08 12:43:54

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

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

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

​

代码语言：javascript
复制
$(".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();
});
代码语言：javascript
复制
tr.demo-row {
  display: none;
}
代码语言：javascript
复制
<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>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/53682527

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档