並び替えできるテーブルであることをリンクで伝える方法を見ていて、
ヘッダの項目名を a 要素を使ってリンクにして、テーブルの列に対して何か操作ができることを明示しています。さらに、そのリンクに title 属性を付与して、該当の列で並び替えできることをツールチップを使って伝えています。
なるほどなー、こちらのほうが親切でよりユーザにクリッカブルだと分かりやすい！と思ったので、載っている方法でテーブルヘッダを ほげほげなどとしてみたが、アンカーのようなスタイルにはならなかった。良く見てみたら上記用にスタイルを指定してるのね。というわけで折角だからjQueryで動的にアンカータグとスタイルを指定してみよう。
$(function(){ $('#tablesorter_demo th').each(function(){ var $header = $(this).text(); $(this).html('<a title="' + $header + 'でソートします">' + $header + '</a>').css('text-decoration','underline').css('color','blue'); }); });
これならtablesorterと一緒に使い回せるハズ。
Javascript素人な私でも、自分のしたいことが実現できるjQueryはやはりすごい。
