2014年5月14日水曜日


一覧形式の入力画面などの場合、
表示されている表に対して、1行追加してデータを入力するような機能があると思います。
色んなやり方があると思いますが、今回はダミー行をコピーして追加する方法を紹介したいと思います。

サンプルソース


No タイプ 名称
1
2
3
上のサンプルは、 「」の1行目をダミー行と見なして「style="display:none;"」を設定しています。
ダミー行=コピー元として扱っています。

「行追加」ボタンを押されると、ダミー行をコピー(clone)してテーブルに追加(appendTo)しています。

説明は簡単ですが・・・・上記サンプルソースのそれぞれのブロックで何をしているのかを簡単に・・・

var max_no = $( '#sample_table > tbody > tr:last td:first' ).html();
まずこの部分ですが、jqueryのセレクターを使って、
「id=sample_table」の子供の「tbody」の子供の「最後に出てくるtr」の「最初に出てくるtd」のHTMLを変数に代入しています。
要は一番下のNo列の文字を・・・って意味なのですが、説明が下手ですいません。
(もっといいやり方があるはず・・・)


$("#sample_table > tbody > tr:first").clone(true).appendTo(
$("#sample_table > tbody")
);
こちらは、一番最初の行(ダミー行)をコピー(clone)してテーブルに追加(appendTo)しています。


$( '#sample_table > tbody > tr:last' ).css('display', '');
追加した行のスタイルで「dispay:none」を外して見えるようにしています。

$( '#sample_table > tbody > tr:last > td > input' ).each(function() {
var base_name = $(this).attr('name');
$(this).attr('name', base_name + "_" + next_no);
});
最後は、コピーして追加した行の「input」の「name」属性を変更しています。


こんな感じです。
デモをご覧になりたい方は下記ボタンよりどうぞ。
【jquery】jqueryを使ってテーブルに新規行を追加する

0 コメント:

コメントを投稿

要望&問い合わせ

名前

メール *

メッセージ *