スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JQueryを使ってTABLEのを増減する方法【続き】

前回TABLEのTRの増減がJQueryで簡単にできたので、これをプラグイン化すれば汎用的に使えてなおグッドですよネ!というところで話が終わっていたので、その続きを。

とりあえずテーブルのHTMLを用意します。


<table style="table-layout: auto;" border="1" id="tbl">
<tr><td>No.</td><td>入力値</td></tr>
<tr><td>1</td><td><input name="input[]" value="1" type="text"></td></tr>
<tr><td>2</td><td><select><option>A</option><option>B</option></select></td></tr>
</table>
<br><br><input name="add" value="+" type="button"><input name="sub" value="-" type="button"><br>
<input value="登録" type="button">


プラグインにするに当たり、汎用的な動きを定義します。

  • 「+」ボタンを押したら直前の行がコピーされる

  • 「-」ボタンを押したら末尾の行が削除される



つまりテーブル、「+」ボタン、「-」ボタンの3つがワンセットで動作することが前提条件になります。
そこで、テーブル及びボタンには下記の規則があることにします。

  • 「+」ボタンのIDはTABLEのID-add
  • 「-」ボタンのIDはTABLEのID-del


この例ではTABELのIDがtblなので

  • TABLEのID → tbl
  • 「+」ボタンのID → tbl-add
  • 「-」ボタンのID → tbl-del



ソースに反映するとこうなります。

<table style="table-layout: auto;" border="1" id="tbl">
<tr><td>No.</td><td>入力値</td></tr>
<tr><td>1</td><td><input name="input[]" value="1" type="text"></td></tr>
<tr><td>2</td><td><select><option>A</option><option>B</option></select></td></tr>
</table>
<br><br><input name="add" id="tbl-add" value="+" type="button">
<input name="sub" id="tbl-del" value="-" type="button"><br>
<input value="登録" type="button">


いよいよ動作を行うプラグインを作ります。JQueryのプラグインには関数型とメソッド型があり、DOMを変更する場合はメソッド型が推奨されているようなので、今回はメソッド型で作ります。

まずプラグインを定義

$.fn.colCopy = function(){
};

名前は何でもいいですが、今回はcolCopyという名前で作ります。

行の増減を行う対象(今回はtbl)は自由に決めたいので、オプション引数にテーブルのIDを渡すように作り替えます。

$.fn.colCopy = function(options){
options = $.extend({
actItem:'tbl'
},
options);
};

options.actItemにID名を渡すように作ります。上記ではactItemが指定されていなければtblが入ります。

アクションのトリガとなる「+」「-」ボタンのID名もプラグインの中で定義してしまいます。

$.fn.colCopy = function(options){
options = $.extend({
actItem:'tbl'
},
options);

var actId = '#'+options.actItem;
var actAdd = actId+'-add';
var actDel = actId+'-del';
};

セレクタとして使うことを意図しているので、それぞれ先頭に#が入ります。

これでひと通りの準備ができましたので、「+」ボタンクリック時の動作部分を作ります。

$(actAdd).bind('click',function(){
act = $(actId)[0];
if(typeof act != undefined){
nowRow = act.rows.length;
afRow = nowRow + 1;
cloned = $(actId+" tr:nth-child("+nowRow+")" );
$(cloned).clone(true).insertAfter(cloned);
$(actId+" tr:nth-child("+afRow+") input,"+ actId+" tr:nth-child("+afRow+") select").val("");
$(actId+" tr:nth-child("+afRow+") td:nth-child(1)" ).text(nowRow);
}
});

前回はclickイベントを使っていましたが、今回はbindを使います。何となくです。
最初にTABLEのJQueryオブジェクトを変数actに代入してます。どうもこの書き方でないとちゃんとtableオブジェクトを取ってくれないぽい。
次にTABLEオブジェクトが存在したら行数を数えて一番末尾にcloneを追加し、初期化してます。ほぼ前回のコピーですが、ちょっと頭を良くしてinputまたはselectのどっちも初期化してます。

「-」ボタンクリック時の動作部分を作ります。

$(actDel).bind('click',function(){
act = $(actId)[0];
if(typeof act != undefined){
nowRow = act.rows.length;
if(nowRow > 2){
act.deleteRow(nowRow - 1);
}
}
});

完全に前回のコピーです。これでほとんど出来上がりですが、これだとif(nowRow > 2)固定になっていて、TABLEの見出し行が2行だと正しく動かないので、見出し行の行数をオプションで渡すように変更します。

$.fn.colCopy = function(options){
options = $.extend({
actItem:'tbl',
minCol:2
},
options);

var actId = '#'+options.actItem;
var actAdd = actId+'-add';
var actDel = actId+'-del';
var minCol = options.minCol;

--- 中略 ---

$(actDel).bind('click',function(){
act = $(actId)[0];
if(typeof act != undefined){
nowRow = act.rows.length;
if(nowRow > minCol){
act.deleteRow(nowRow - 1);
}
}
});
};


あとはDOM読み込み時にこのプラグインを使うように指定するだけ!

$().ready(function(){
$().colCopy({actItem:'tbl',
minCol:2
});
});


全部まとめたサンプルがこちら
これを別ファイルにして、JQueryとセットで呼び出せばどこでもTABLEの増減ができるネ!
スポンサーサイト

Leave a reply






管理者にだけ表示を許可する

Trackbacks

trackbackURL:http://epigonen190.blog.fc2.com/tb.php/15-0e4899f1
該当の記事は見つかりませんでした。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。