javascript - 表の行のクローン

Question

下の図に美しく示されている ive のように、javascript を使用してテーブルの行を複製するにはどうすればよいでしょうか (私はそう思います)。

score 13 · Accepted Answer

すべてのボタンにライブイベントを接続できます。たとえば、それらにクローンのクラスを与えると、次のように機能します。

$('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 セレクター

あなたはこのようにすることができます

score 0 · Accepted Answer

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

score 0 · Accepted Answer

本当にシンプルなソリューションが必要な場合は、innerHTML を使用してください。

var html = document.getElementById("the row").innerHTML;

var row = document.createElement('p');

row.innerHTML= html;

document.getElementById("table id").appendChild(row);

score 0 · Accepted Answer

どのような目的でデータを使用したいですか? 以前にデータ入力フォームで同様のことを行ったことがありますが、一般的には、Javascript ですべてを操作するのではなく、フックしてサーバーにデータを保存し、AJAX とインターフェースすることがユーザーにとって有益であることがわかりました。

問題は、ユーザーにこの種の複雑なテーブル操作を許可し始めたときに、ユーザーが誤って [戻る] ボタンを押すとすぐに、多くの不満を抱くパンターになってしまうことです。データベースに一時ストレージをコーディングすることは、Javascript を操作するよりもそれほど難しくなく、操作をより簡単に分割できるため、実際にはより簡単になります。そのため、デバッグも簡単です (テーブルの現在の状態への検査アクセスは常に可能です)。

Lots of option for handling via AJAX - the simplest being to just use a place-holder division and feed the whole table structure in as needed.

javascript - 表の行のクローン

4 に答える 4

Related

Reference