【1日1コード】【jQuery】テーブルの行 追加・削除サンプル

眠さのあまり、昨日更新が出来なかった junerです。はい。すでに1日1コードじゃなくなっていますね。

で、今回のコードですが、 jQuery で formでテーブル全体を送信することを想定したテーブルの追加・削除例となります。

formでテーブル全体を送る場合、何かと name[n].test みたいな形式にする必要があったりして面倒なので（仕事でも）よく使うコードとしてここらへんで書いておきます。

結果だけ見る場合はこちらのリンク

で、今回のは装飾とかはなしで、ささっと作ったのでポイント解説していきたいと思います。

コード解説

リスト系name属性の番号の振り直し

$table.find("tbody")
.on("renumber","tr:not(:first-child)",function(e,num){
var $tr = $(this),
reg = /\[.*\]/;
//numが入っていない場合は求める
num = num === undefined
? $table
.find("tbody tr:not(:first-child)")
.index(this)
: parseInt(num);
$tr
//偶奇対応
.removeClass("even odd")
.addClass( num%2==0 ? "odd" : "even")
//中の名前付き入力項目のnameの整理
.find("input[name]").each(function(){
this.name = this
.name.replace(reg,"["+num+"]");
}).end()
//次の行で同様のイベントを起こす
.next("tr")
.trigger("renumber",[num+1]);
})

番号の振り直しは色々とよく使うのでカスタムイベントとして定義します。番号の振り直しのカスタムイベントは最初以外のtr要素(tr:not(:first-child) )に対してrenumber として定義しています。

行のindexは毎回求めるとコストが高いので わかる場合はtrigger時の引数として渡せる様にし、わからない場合は tbody tr:not(:first-child)上の順序を.index(this)にて求めています。

次の行のrenumberイベントを起こす処理は、前の1日1コードでもやった様に次の行を.next("tr")で求め、.trigger("renumber",[num+1])により、現在のnum+1の番号としてrenumberカスタムイベントを実行しています。

行の追加

$("#add")
.on("click",function(e){
var $tbody = $table.find("tbody");
$tbody
.find("tr:first-child")
.clone()
.find("input[name]")
.prop("disabled",false)
.end()
.appendTo($tbody)
.trigger("renumber");
return false;
})

行の追加は非表示にしてる一行目のtr要素をテンプレートとして利用する形にしている為、tr:first-childの様なセレクタで非表示になっている一つ目の行を選択後、.clone()で対象要素を複製しております。

そのあと、活性・非活性の調整を行った後に.appendTo($tbody)で追加し、inputについている名前の番号付けを行う為、対象行に対して.trigger("renumber")によりカスタムイベント:renumberを起こしています。

行の削除

$table.find("tbody")
.on("click","button.delete",function(){
var $tr = $(this).closest("tr"),
$next = $tr.next("tr");
$tr.remove();
//もしも次の行があるなら番号の整理を行う
$next.trigger("renumber");
return false;
})

前の1日1コードでもやった様に、ボタンから行を求め、次の行を取得した後、自行を削除して次の行にカスタムイベント：renumberを実施する感じとなります。

以上。