克隆表行

我如何使用javascript（我假设）来克隆像下面图片中精美插图的表格行？

克隆行http://sofzh.miximages.com/javascript/2yyuz61.png

Answer 1

您可以将实时事件连接到所有按钮。 如果你给他们一个克隆类，例如以下将是有效的。

$('input.clone').live('click', function(){ //put jquery this context into a var var $btn = $(this); //use .closest() to navigate from the buttno to the closest row and clone it var $clonedRow = $btn.closest('tr').clone(); //append the cloned row to end of the table //clean ids if you need to $clonedRow.find('*').andSelf().filter('[id]').each( function(){ //clear id or change to something else this.id += '_clone'; }); //finally append new row to end of table $btn.closest('tbody').append( $clonedRow ); }); 

请注意：如果表格行中的元素包含id，则需要通过它们执行.each并将它们设置为新值，否则最终会在dom中出现重复的id，这是无效的并且可能会造成严重破坏jQuery选择器

你可以这样做

Answer 2

如果你想要一个非常简单的解决方案，只需使用innerHTML：

 var html = document.getElementById("the row").innerHTML; var row = document.createElement('p'); row.innerHTML= html; document.getElementById("table id").appendChild(row); 

Answer 3

您想要使用数据的目的是什么？ 我之前在数据输入表单上做过类似的事情，通常我发现它对用户不利于操纵Javascript中的所有东西，而是钩住将数据存储在服务器上并与AJAX接口。

问题是，一旦你开始让用户进行这种复杂的表操作，他们不小心点击了后退按钮，你最终会遇到很多不满的投注者。 编写数据库上的瞬态存储并不比操作Javascript困难得多，事实上可以更容易，因为您可以更轻松地打破操作。 由于这个原因，调试也更简单（您始终可以检查表的当前状态）。

通过AJAX处理的选项很多 – 最简单的方法就是使用占位符分区并根据需要提供整个表结构。

Answer 4

一个jQuery示例：

 $(document).ready(function(){ $('TABLE.recs').delegate('INPUT.clone','click',function(e){ e.preventDefault(); var s = $(this).parent().parent().clone().wrap('
').parent().html(); $('TABLE.recs TBODY TR:last').after(s); }); });