簡単！tableのセル/行/列にjQuery数行で色付けするコード解説します

どうもかわうそです！

今日はtableのセル/行/列にjQuery数行で色付けするコードを紹介します。

デモサイトはこちら。https://kawauso-29.com/table

まずコードがこちらです。※もちろんhoverでもokです！

See the Pen
eYYmMXq by kawauso29 (@kawauso29)
on CodePen.

今回、jQueryでcssを指定していますので、スタイルシートには何も書いていません。めんどくさかった・・・

改行の除けば10行も書いてません!超簡単です。

早速解説していきます。

jQueryコード解説

HTMLのコードに関しては、テーブルタグにpointerクラスを振ってる以外なにも触ってないです。

Excelをコピペで一瞬でテーブルタグを作ってくれるサイトはこちら>>

1行目-マウスオーバーイベント

$('.pointer td').on('mouseover',function(){

言語化すると、pointerクラスの子要素のtdすべてに対して、マウスオーバー=カーソルが乗ったときに、ファンクションを実行しなさいよ！！！ってことです。ここは詳しく解説しません。

2行目-マウスオーバー時のセルの順番を取得

var td_index = $(this).index();

1	var td_index = $(this).index();

マウスオーバーしたセルが行の中で上から何番目なのかindex()メソッドで数字を調べて、変数td_indexに保存しなさい！！という1行です。

ポイントは、親要素trの中にある子要素tdの順番を調べてくれる点です。

そして、マウスオーバーしたセル＝$(this)で記述していることです。

$(this)ってのは何かをざっくりいうと、イベント(今回でいうマウスオーバー)が発生した要素ってことですね。

そしてindex()メソッドは、指定した要素が何番目にあるのかを調べてくれる便利なやつなんです。

var td_index = $(this).index();

1	var td_index = $(this).index();

マウスオーバーしたセルが行の中で上から何番目なのかindex()メソッドで数字を調べて、変数td_indexに保存しなさい！！という1行です。

という意味になるってことですね。

以下は発展なので、次に行きたい方はこちらへ進んでくださいね。

※マウスオーバーしたセルが全体の中で何番目なのか、を調べたい場合は記述が変わります。

var td_all_index = $('.pointer td').index(this);

1	var td_all_index = $('.pointer td').index(this);

こちらも言語化しておくと、

マウスオーバーしたセル=thisが、pointerクラスが付いたテーブル全体のセルの中で$(‘.pointer td’)、上から何番目なのかindex()メソッドで数字を調べて、変数td_all_indexに保存しなさい！！という1行です。

3行目-マウスオーバーしたセルを太字に

$(this).css('font-weight','bold');

1	$(this).css('font-weight','bold');

これは$(this)の意味が分かっていれば簡単です！

これも言語化すると

マウスオーバーしたセル$(this)のフォントの太さを太くしなさい！という指示ですね。

4行目-マウスオーバーしたセルを含む1行の背景色変更

$(this).parent().find('td').css('background','#cccccc99')

1	$(this).parent().find('td').css('background','#cccccc99')

こちらも記述は先ほどより長いのですが簡単です！

いつものごとく言語化してみますね。

マウスオーバーしたセル$(this)の親要素trを選択しましょう.parent()。そしたら、子要素のtdを探して選択してください.find(‘td’)。その選択したtd全ての背景を灰色に変えちゃってください.css(‘background’,’#cccccc99′)！！

つまり、マウスオーバーしたセルの一行全ての背景色を変えなさい！という指示です。

動画にするとこんな感じです

ポイントは、parent()メソッドとfind()メソッドですね。

parent()では、指定した要素の親要素を選択してくれる便利なメソッドです。

もちろん、.parent().parent()とつなげれば、2階層上の要素を選択してくれますが、これでは芸がないので一階層以上の親要素を取得したい場合は、parents()メソッドを使ったりします。

find()メソッドもparent()メソッドと同類で、子要素を探してくれるメソッドなんです。

ただ、find()の場合は、何を探しに行くのか、セレクタやタグを指定してあげましょう。

今回でいうとfind(‘td’)として、parent()で指定したtrの子孫要素のtdを探してこーい！って指示を送ったわけです。

find()のほかにもchild()やchildren()メソッドもあります。

5行目～8行目-マウスオーバーしたセルを含む1列の背景色変更

$('.pointer tr').each(function(){
  $(this).find('td').eq(td_index-1).css('background','#cccccc99');
});

$('.pointer tr').each(function(){

$(this).find('td').eq(td_index-1).css('background','#cccccc99');

});

少し長いですが大丈夫です！

まずこれを言語化してみます。

pointerクラスが付いたテーブルタグの子要素の全てのtrを選択し$(‘.pointer tr’)、そのtr1つ1つにファンクションを実行しなさい！！each(function(){・・・}

そのファンクションの内容っていうのは、

今、ファンクションを実行しているtr($(this))の子要素のtdを探して指定しなさいfind(‘td’)。その5つあるtd達のうち、td_index-1番目のtdを、eqメソッドで指定しなさい.eq(td_index-1)。そしてそのセルの背景をグレーに変えなさい。(‘background’,’#cccccc99′)

つまりこいつは、マウスオーバーしたセルと同じ列のセルの背景を変えてくれているんです。

動画にするとこんな感じです。

ポイントはeach()メソッドです。

指定した要素や配列に対して、それぞれに同じ処理を繰り返してくれる便利なメソッドなんです！！

trを選び、tdを見つけ、今回なら4番目のtdを選択し、背景色を変える、をtr分繰り返す

まさにこのコードです。

$(this).find('td').eq(td_index-1).css('background','#cccccc99');

1	$(this).find('td').eq(td_index-1).css('background','#cccccc99');

.eq()メソッドは、.eq(数字)で、指定番号の要素を選択できるんです！

つまり1行目で取得した、行の中でのセルの番号である

var td_index = $(this).index();

1	var td_index = $(this).index();

td_indexを使用して、列を決めているんですね！！

なんでeq( td_index -1)かというと、eq()は0からカウントするのに対し、index()は1からカウントしてしまう、というプログラムあるあるの解決のためです。

以下発展なので、スルーしたい方はこちらに進んでください>>

※ちなみにeach()メソッドは、引数として、indexとhtml要素をくれる便利なやつです。試しに、

$('.pointer tr').each(function(index,html){
  console.log(index);
  console.log(html);
});

$('.pointer tr').each(function(index,html){

console.log(index);

console.log(html);

});

このコードに変えて、コンソールを確認してみてください。

こちらも記述は先ほどより長いのですが

そういえば、他行でも$(this)使ってましたよね。

var td_index = $(this).index();

1	var td_index = $(this).index();

each()メソッド内では、$(this)の中身がtrに変わっていることが分かるはずです。

9行目以降

以下のコードはこちらです

$('.pointer td').on('mouseout',function(){
  var td_index = $(this).index();
  $(this).css('fontweight','normal');
  $(this).parent().find('td').css('background','#fff');         
  $('tr').each(function(){$(this).find('td').eq(td_index-1).css('background','#fff')});
});

$('.pointer td').on('mouseout',function(){

var td_index = $(this).index();

$(this).css('fontweight','normal');

$(this).parent().find('td').css('background','#fff');

$('tr').each(function(){$(this).find('td').eq(td_index-1).css('background','#fff')});

});

何かっていうと、マウスオーバーではなく、マウスアウト、つまりセルからマウスが離れた時のアクションを指示しているわけです。

背景色など色を変えたセルに関しては、マウスがオンしたときの動作だけだと色が付きっぱなしになってしまいますよね。

ですので、マウスアウトした際には、マウスオーバーしたときのアクションを打ち消す指示をしてあげましょう。

といっても、背景色を太字を元に戻すだけなので、マウスオーバー時とコードは変わりませんので、解説は省きます。

これでコードの解説は終了です。

hoverメソッド

なんでhoverじゃないねん！とお怒りになった方もいると思います。

マウスオーバーとマウスアウトのイベントがあることを先に紹介したかったんです。

今回、on(‘mouseover’)とon(‘mouseout)で両方の動作を別々にしましたが、それをまとめてくれるのがhoverメソッドです。

hover()を使って書き換えると・・・

$('.pointer td').hover(function(){
  var td_index = $(this).index(); $(this).css('font-weight','bold');    
  $(this).parent().find('td').css('background','#cccccc99');
  $('tr').each(function(){
  $(this).find('td').eq(td_index-1).css('background','#cccccc99')});
},function(){var td_index = $(this).index();
  $(this).css('font-weight','normal');
  $(this).parent().find('td').css('background','#fff');
  $('tr').each(function(){$(this).find('td').eq(td_index- 
  1).css('background','#fff')});
});