克隆表行

Question

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

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选择器造成严重破坏< / p>

你可以这样做

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('<div>').parent().html();
     $('TABLE.recs TBODY TR:last').after(s);
   });
});