一覧形式の入力画面などの場合、
表示されている表に対して、1行追加してデータを入力するような機能があると思います。
色んなやり方があると思いますが、今回はダミー行をコピーして追加する方法を紹介したいと思います。
サンプルソース
上のサンプルは、 「」の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を使ってテーブルに新規行を追加する
登録:
コメントの投稿 (Atom)
0 コメント:
コメントを投稿