克隆表行

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選擇器

你可以這樣做

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