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

JQuery

前回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">

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

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

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

  • 「+」ボタンの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の見出し行が２行だと正しく動かないので、見出し行の行数をオプションで渡すように変更します。


$.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の増減ができるネ！