皆さんこんにちは。今回も jQuery を駆使して面白い仕組みを作ってみましょう。
マウスを乗せたときに、そのセルの行と列の色がハイライトされる仕組みです。
こう聞いただけである程度スクリプトの内容が想像できる人は、初心者から初級者へステップアップしています！
HTML, CSS と jQuery の関係について、基礎から学びたい方は以下を参考にしてください。
HTMLとCSSとjQueryの関係を超わかりやすく解説【初心者対象】
jQuery を使って、テーブルの色を操作する
完成形はこんな感じになります
See the Pen
Untitled by taichi (@taichi_na)
on CodePen.
表があり、縦横に <th> で値が指定されています。
<td> 要するに各セルにマウスオンしたときに、その行と列の色が変わってハイライト表示される仕組みになっています。
ではこれから、HTML, CSSから形にしていきましょう。
HTML, CSS で見た目をととのえる
See the Pen
Untitled by taichi (@taichi_na)
on CodePen.
いたって普通の表なので特に説明はいらないと思います。
罫線はデフォルトだと二重線になってしまうので、table 要素内に以下のように記述して一本線にしてあります。
style=”border-collapse: collapse”
CSS の最下部に .color というセレクタがあると思います。
これは、jquery で後付けするクラスになります。背景色にハイライト用のカラーを指定しておきます。
HTML, CSS に関してはこれくらいでOKですね。jQuery に移りましょう。
jQuery でマウスオン時にクラスを付ける
See the Pen
hignlight by taichi (@taichi_na)
on CodePen.
1. $(“td”).hover(function(){
<td> にマウスカーソルを乗せたときに～ のスクリプト
2. $(this).parent().addClass(“color”);
this 要するに td の親要素 <tr> にcolor クラスを付けます。
3. var number = $(this).index();
変数を指定します。クリックされた <td> が同階層内で数えて何番目にあるのかを取得し、それを変数 number に代入します。
4. number ++;
変数 number に１を足します。
なぜかというと… index() メソッドで取得する順番は、0から始まるのに対して、テーブル内のセル（td:nth-child()）は1からカウントをするからです。
5. $(“td:nth-child(” + number + “)”).addClass(“color”);
縦の列にハイライトを付け加えたいのですが、先ほどの <tr> のように一括指定はできないので少し工夫が必要になります。先ほど準備した number を td:nth-child() に代入して、左から数えて同じ番目にあるすべてのセルに対して color クラスを追加します。
これで縦の列もすべてハイライトさせました。
6. }, function(){
$(“.color”).removeClass(“color”);
function を追加しマウスアウト時の処理を追加しましょう。
これまでのスクリプトで付けた color セレクタを消去します。
以上です！ お疲れさまでした。
まとめ：複雑な場合は一つずつ動きを確認しましょう
See the Pen
hignlight by taichi (@taichi_na)
on CodePen.
今回は横の列と縦の列に分けて考えていきました。
横の列に関しては <tr> で一括指定できたので、そのままセレクタを追加できましたが、縦の列を一括でくくることができる要素は無いので、テーブルの端から数えて何番目になるのかを index() メソッドで取得し、それを実際の番目とそろえて使いました。
途中でわからなくなったら、分解して一つずつ確認しましょう。
実際に紙に書き出したり、図を書いてみたりみると、すんなり理解できることもありますよ。
ではまた！
