現在見ているテーブルのセルが分かりやすいようにマウスオーバーで縦と横のセルをハイライトするようにするTipsです。css3の:nth-child() 疑似クラスを、jQueryを使用してクロスブラウザに対応させます。

という訳でメモ書き。探したらプラグインを使うものばかりだったのですが、これだけの為にプラグイン使うのは正直アレなので簡単なコードでハイライトできるようなものを。

サンプル

マウスを乗せるとハイライトします

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コードが間違ってる的なご意見見かけたのですが、気になるようでしたらファイル落としてご自身の望む形に直してご利用くださいませ。