現在見ているテーブルのセルが分かりやすいようにマウスオーバーで縦と横のセルをハイライトするようにするTipsです。css3の:nth-child() 疑似クラスを、jQueryを使用してクロスブラウザに対応させます。
という訳でメモ書き。探したらプラグインを使うものばかりだったのですが、これだけの為にプラグイン使うのは正直アレなので簡単なコードでハイライトできるようなものを。
サンプル
マウスを乗せるとハイライトします
| 1 | ２ | ３ | ４ | |
|---|---|---|---|---|
| A | サンプル | サンプル | サンプル | サンプル |
| B | サンプル | サンプル | サンプル | サンプル |
| C | サンプル | サンプル | サンプル | サンプル |
| D | サンプル | サンプル | サンプル | サンプル |
| E | サンプル | サンプル | サンプル | サンプル |
IE6ではtd.hover:hoverが効かないので濃くなりません。IE6はもういいんじゃないかな。
JavaScript
jQuery本体と以下のコードで動作します
$(function(){ var overcells = $("table td"), hoverClass = "hover", current_r, current_c; overcells.hover( function(){ var $this = $(this); (current_r = $this.parent().children("table td")).addClass(hoverClass); (current_c = overcells.filter(":nth-child("+ (current_r.index($this)+2) +")")).addClass(hoverClass); }, function(){ current_r.removeClass(hoverClass); current_c.removeClass(hoverClass); } );}); |
css
table td.hover {background:#cffbfb;}table td.hover:hover {background:#84f4f4;} |
テーブルは普通にマークアップすればOK。
【追記】ダウンロード
jsコードが間違ってる的なご意見見かけたのですが、気になるようでしたらファイル落としてご自身の望む形に直してご利用くださいませ。
