クローンテーブルの行

Question

どのように私は、下の画像に美しく描かれたイブのようなテーブルの行を複製するためにJavaScriptを使うことができますか？

clone row http://i28.tinypic.com/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を行う必要があり、新しい値にそれらを設定しますそうでなければ、内のIDの重複になってしまいますあなたは本当にシンプルなソリューションをしたい場合は、単にinnerHTMLプロパティを使用しますので、

Answer 2

のようにこれを行うことができ、有効ではありませんし、jQueryのセレクタ

に大混乱を再生することができ、DOM：

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

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