このところ、jQueryを猛烈に勉強しているワテであるが、当記事では最近覚えた小技を紹介したい。
まあワテの備忘録みたいなもんだ。
では、本題に入ろう。
tableのtd内にある要素から祖先を遡ってtr要素を取得したい
例えば、htmlページの中にテーブルを作成して、その中にcheckboxが有る例を考える。
こんな感じか。
<table> <tbody> <tr> <td><input type="checkbox" /></td> <td>カラム1</td> </tr> <tr> <td><input type="checkbox" /></td> <td>カラム2</td> </tr> </tbody> </table>
描画するとこんな感じ
| カラム1 | |
| カラム2 |
さて、この時、チェックボックスがクリックされて☑がONになったら、その列の色を変えたい。
| カラム1 | |
| カラム2 |
こんな感じにしたい。
そういう場合に、いろんなやり方が有ると思うが、まあjQuery初心者のワテの場合には、こんなコードを書いてみた。
$(document).ready(function () {
$('table > tr > td > input[type=checkbox]').on('change', function (e) {
var thisJQ = $(this); // thisはクリックされたcheckbox
var trJQ1 = thisJQ.parent().parent();
var trJQ2 = thisJQ.closest('tr');
if (this.checked) {
trJQ2.addClass('selectedRow');
} else {
trJQ2.removeClass('selectedRow');
}
})
});
つまり、チェックボックスの on changeイベントハンドラー関数に於いて、
var thisJQ = $(this); // thisはクリックされたcheckbox
でthisJQを作成しておいて、
var trJQ1 = thisJQ.parent().parent();
あとは、一つparent()を遡ると td、もう一つparent()を遡ると tr が得られる。
その trJQ1に対して、selectedRowクラスをadd/remove すれば良い。
selectedRowクラスは cssスタイルシートの中で、background-colorを好きな色に割り当てて置けば良い。
まあこれで上手く行くのだが、今日、もっと良い方法を覚えた。
.closest(‘tr’) を使うと簡潔に書ける
具体的には以下のように書ける。
var trJQ2 = thisJQ.closest('tr');
つまり、チェックボックス thisJQ から祖先を遡り、最初に見つかった tr を返すのが closest() だ。
parent().parent() のように何世代まで遡る必要があるのかなどを意識しなくても良いのが便利。
例えば、もし、<span></span>などが入って
<td><span><input type="checkbox" /></span></td>
とかになると、parent().parent().parent() のように三世代遡る必要があるだろう。
でも .closest(‘tr’) なら一発で行けるのだ。
ああ、便利。
まとめ
いや~、jQueryは奥が深い。
知らない事が沢山ある。
その結果、自己流でヘンテコな関数をシコシコ苦労して作ってデバッグにも苦労して、やっと完成したと思ったら、良く調べてみたら、同じ機能を持つjQueryのメソッドが有るやん！
みたいな経験も何度かある。
骨折り損のくたびれ儲けと言うヤツか。
そう言う無駄を避ける為にも、今学習中の言語に関しては、兎に角一冊本を読んでおいて、どういう文法が有るのかと言う事を頭に入れておくと良いだろう。
全部記憶出来ればそれは良いが、普通の人は丸暗記は難しい。
でも、頭の片隅にでも記憶が残っていれば、「確か、こんな場合にはあの関数が使えるんじゃないかなあ！？」なんて閃く場合もある。
そうすると自作で無駄な関数を作成する必要もなく、開発期間も短縮出来る。
jQueryの本を読む
この二冊はアマゾンランキングも高い。よく見かける本だ。
一方、これは何？
ほんまに５倍早くなるのか？
誰かが測定したのか？
コメント