[jQuery] プラグインを使わずに少しのコードを使ってテーブルのセルを分かりやすくハイライトする

Ads
cssやプログラミング

現在見ているテーブルのセルが分かりやすいようにマウスオーバーで縦と横のセルをハイライトするようにする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コードが間違ってる的なご意見見かけたのですが、気になるようでしたらファイル落としてご自身の望む形に直してご利用くださいませ。

タイトルとURLをコピーしました