• かちびと.net

    [jQuery] プラグインを使わずに少しのコードを使ってテーブルのセルを分かりやすくハイライトするTips。探してみたらプラグインしかなかったので簡単なコードで実装出来る方法を書いておきます。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

現在見ているテーブルのセルが分かりやすいようにマウスオーバーで縦と横のセルをハイライトするようにする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 :
TRB :

Comments & Trackbacks (3)

Ads

Posts

Contact

Services