少しのjQueryコードで(ryをもう少し短くしてみたよ

facebookをみていたら見かけたので

少しのjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする

ムラムラしてきたから,つい,カッとなって.

もっと短くしてみた!

jQuery(function($) {
    $('tbody tr[data-href]').addClass('clickable').delegate('*', 'click', function() {
        if ( this.tagName !== 'A' ) {
            window.location = $(this).parents('tr').data('href');
        }
        return false;
    });
});

a要素のhoverイベントごとにunbind繰り返すよりは,delegateでやったほうがよさげな.すべての条件で同じように動くかは怪しい気もしますがー.a要素に別のclickイベントとかは貼っても大丈夫です.

短ければいいってもんじゃないのでアレですが!

もっと追記:delegateしたのは,The Difference Between jQuery’s .bind(), .live(), and .delegate() - Alfa Jango Blogの影響なので参考まで合わせてURL紹介しておきます :-) ( added: 2011-06-09 23:05 )

こうですか

さんぷるー.CSS類はhover擬似クラスで書いてます.

追記:別URLにも サンプルを用意しました

このブログは,IEとかを放置しっぱなしなので,ナチュラルにエラー出てスクリプト止まります.そうすると,クロスブラウザかどうか分からないですね.↑のを参考にどうぞ.( added: 2011-06-09 20:49 )

サンプル

Col 1 Col 2 Col 3 Col 4 Actions
Google text text text Edit Delete
Bing text text text Edit Delete
Yahoo! Japan text text text Edit Delete
Naver text text text Edit Delete

64%ぐらいに圧縮

% irb                                                                                                                                                                        
>> "jQuery(function($){$('tbody tr[data-href]').addClass('clickable').click(function(){window.location=$(this).attr('data-href');}).find('a').hover(function(){$(this).parents('tr').unbind('click');},function(){$(this).parents('tr').click(function(){window.location=$(this).attr('data-href');});});});".length
=> 296
>> "jQuery(function($){$('tbody tr[data-href]').addClass('clickable').delegate('*','click',function(){if(this.tagName!=='A'){window.location=$(this).parents('tr').data('href');}returnfalse;});});".length
=> 191

空白と改行を除いてカウントしました.

元ネタは,Clickable Table Rows with jQuery だそうです.

かちびと.netさんにも,ネタ借りちゃってごめんなさい&ありがとうございます.m(_ _)m

さらに追記

ざんねんながら,もっと少量のjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする方法のほうが短いコードでした.( 169文字ぐらい? ) ネタかぶったー・・・w 一点,これだと td > span とか入ると動かないですね.判定は!$(e.target).is('a')で良いかも.どのみちケースバイケースなとこですが.( added: 2011-06-09 21:00 )