テーブルセルの全選択、列・行の選択と引続き最後はセル単体の選択・解除のサンプルを紹介したいと思います。
○第一回:全選択の制御
○第二回:列と行の選択制御
○第三回:個別セルの選択制御 ←今回の説明内容
以下制御のサンプルソースです。
第三回:個別セルの選択制御
html及びcssは前回と同じものを利用します。
javascriptは前回に以下内容を追加します。
■javascript
$(function() { //セルの選択 $("td").on('click', function() { if($(this).hasClass('td_chk') == false) { $(this).addClass('td_chk'); } else { $(this).removeClass('td_chk'); } }); });
解説
最後となる今回はテーブルセル単体の選択・解除の制御です。
第一回、第二回とは違いtoggle()での制御を行わない代わりに、if文でセルをクリックした際の条件分岐を行っています。
まずは、on()にイベントハンドラとして「click」を設定します。
※ちなみに、jqueryのバージョンが1.7以上でしたらイベントを設定する際は深く考えずにon()を使っておいた方が便利です。
//セルの選択 $("td").on('click', function() { if($(this).hasClass('td_chk') == false) { $(this).addClass('td_chk'); } else { $(this).removeClass('td_chk'); } });
続いてif文の内容ですが、hasClass()で指定のclassがあるかどうかを確認しています。以下の場合はクリックしたtd要素にクラス名「td_chk」がない(==false)場合は、addClass()でクラス「td_chk」を追加すし、ある場合はremoveClass()でクラス「td_chk」を削除するという内容になっています。
//セルの選択 $("td").on('click', function() { if($(this).hasClass('td_chk') == false) { $(this).addClass('td_chk'); } else { $(this).removeClass('td_chk'); } });
以上で全三回にわたって表データ選択のサンプルをご紹介致しました。
ご意見・ご質問がございましたら是非お聞かせ下さい。