克隆表行 [英] clone table row

问题描述

如何使用javascript（我假设）克隆表格中的一行，如下图所示的精美图片？ 克隆行http://i28.tinypic.com/2yyuz61.png

解决方案

div>

您可以将现场活动连接到所有按钮。如果你给他们一个克隆类，例如下面的将会起作用。

  $（'input.clone'）。live 'click'，function（）{
 //将jquery这个上下文放入一个var 
 var $ btn = $（this）; 
 //使用.closest（）从buttno到最近的行并克隆它
 var $ clonedRow = $ btn.closest（'tr'）。clone（）; 
 //将克隆的行追加到表的末尾
 
 // clean id如果你需要
 $ clonedRow.find（'*'）。andSelf（）。filter（'[id]'）。each（function（）{
 // clear id或更改为别的
 this.id + ='_clone'; 
}）; 
 
 //最后追加新行到表尾
 $ btn .closest（'tbody'）。append（$ clonedRow）; 
}）; 
  

请注意：
如果表中有元素用id的行你需要做一个.each通过它们，并将它们设置为一个新的值，否则你将最终在dom中有重复的id，这是无效的，并可以用jQuery选择器来破坏。

您可以这样做

How can i use javascript (i assume) to clone a table row like ive beautifully illustrated in the picture below?

clone row http://i28.tinypic.com/2yyuz61.png

解决方案

You can hookup a live event to all the buttons. If you give them a class of clone for instance the following will work.

$('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 );
});

Please Note: If you have elements in the table row with id's you will need to do a .each through them and set them to a new value otherwise you will end up with duplicate id's in the dom which is not valid and can play havoc with jQuery selectors

You can do this like so

这篇关于克隆表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！