jquery/javascriptを使用してテーブル内の行を動的に追加/削除する

Question

私は上記の問題に対して多くの解決策をとっていましたが、私はセルが残っているのでかなり混乱していますセルの権利は私の場合は当てはまりませんでした。

jqueryのクローンメソッドを使用することはかなり単純ですが、1つの問題もあります。問題は、最後の行をクローンすると、上の行からすべてのデータがコピーされるということです。それに付随する別の問題はIDです。複製が行われると、同じ '名前' & 'ID'がコピーされます。これは、data.soを投稿する際に問題を引き起こします。私はこれでも動的性が必要です。だから、私はどのように動的な '属性'の問題を解決する機能をクローンにデータを渡すことができないのか分からない。

CODE：上記のコードでは、今

<table id="advertisement_main_table" class="table" cellpadding="4" cellspacing="1" width="100%;"> 
<tr class="odd align_center"> 
        <td>1.</td> 
        <td><input type="text" id="ad_elements" class="textbox_150_with_border"></td> 
        <td><textarea id="ad_description" rows="01" cols="50" class="advertisement_textarea" ></textarea></td> 
        <td><input type="text" id="ad_duration" class="textbox_60_with_border"></td> 
        <td><input type="text" id="ad_loop_day" class="textbox_60_with_border"></td> 
        <td><input type="text" id="ad_seconds_played" class="textbox_100_with_border"></td> 
       </tr></table> 

1.ハードコードされたが 'ad_element_1'、 'ad_duration_1' のようなすべてのIDに '接尾辞' を追加する方法を,,, 'ad_element_2'、 'ad_duration_2' で次というように。..

は希望uが私は解決策の

Answer 1

パートがIDの代わりに<input type="text" name="ad_elements[]" class="textbox_150_with_border" />を使用することで言いたいことをundrstand。こうすることで、名前がまだクローンされていても有効です。投稿されると、すぐに一連のad_elementsエントリが表示されます。

残りの場合は、「1」を回すようにします。 "2"にしてください、私は魔法の弾丸がないことを恐れています、あなたはクローン後に自分でそれをやろうとしていますが、この特定のケースではかなり簡単です：

$（new_tr）.find（ 'td：ファーストチャイルド（first-child） '）;return（parseInt（text）+1）+ "。

new_trは、複製されたTRを含む変数で置き換えてください。

Answer 2

動的要素を追加しても、実際にはIDは実際には必要ありません。おそらく、それらが作成されるまでのすべての場合specfically新しいIDSと関連する任意のCSSやjQueryのセレクタは、やっぱ、彼らは、存在しませんので、あなたは、単にそれらを削除することもできますがありません。

$(clonedRow).find('*').removeAttr('id'); 

そうでない場合あなたが本当に新しいidをしたい場合は、あなただけの各要素のグローバルカウンタnewIdと関連付ける新しいidを保つことができる：input要素の上に

newId++; 
$(clonedRow).find('*').attr('id', function() { 
    if (this.id.length) return this.id + '_' + newId; 
}); 

See here as fiddle demonstrationホバーは、新しいIDを確認するために

Answer 3

ここで私はこの問題を解決しました。

var $newRow = $("#tableName tbody>tr:last").clone(); 
$newRow.find('input').attr('someAttribute','0'); 
$newRow.find('input').attr('anotherAttribute','1'); 
$('#tableName>tbody').append($newRow); 

あなたのテーブルにあるコントロールのタイプで 'input'を置き換えてください。そして、実際の属性名で 'someAttribute'、第2引数はもちろんその属性へのあなたの価値です。

Answer 4

これを実現するにはjqueryテンプレートプラグインを使用できます。マークアップを作成してテーブルの行を追加し、テンプレート内で繰り返します。次に、任意のボタンまたは必要な場所のページロードまたはOnClickで関数を呼び出します。サーバー側のデータが必要な場合は、Webメソッドを作成してjasonオブジェクトを返すことによっても行うことができます。あなたはより多くの情報を見つけることができます：http://api.jquery.com/jQuery.template/