javascript - 克隆表行

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 );
});

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