« デフォルトスタイルをリセットするCSS | トップページ | テーブルの列をソートできるようにする »

2008.04.16

マウスオーバーした行をハイライト表示するテーブル

テーブルをもっと便利に使いやすく1|Highlight table rows

Web Designing4月号の「Ajaxハジメマシタ」に“テーブルをもっと便利に使いやすく”と題して便利なスクリプトが載っていましたので、紹介してみます。

Highlight table rowsというスクリプトなんですが、マウスオーバーした行の色を変えることができます。情報量の多いデータテーブルなどに使うと便利なのではないでしょうか。
また、最近は結構いろんなページで使われているので、見たことがある人も多いでしょう。

サンプルはこちら

↑このサンプルはこちらからダウンロードできます。

設定の仕方もいたって簡単です。
highlight.jsを読み込み、
<head>〜</head>の間に下記のスクリプトを記述。

<script type="text/javascript">
<!--
window.onload = function(){
addTableRolloverEffect("ranking", "tableRollOverEffect1", "tableRowClickEffect1");
}
// -->
</script>

あとは、反映させるテーブルに先程のスクリプトで設定した"ranking"という名称をid属性値に追加するだけです。
細かな所はサンプルのソースをよく見てもらうか、Web Designing4月号を読んでください。
次回はもう1つのスクリプトをご紹介します。

|

« デフォルトスタイルをリセットするCSS | トップページ | テーブルの列をソートできるようにする »

コメント

これいいです。今管理しているサイトに料金表の羅列があってもっと見やすくならないものかと思っていた矢先です。早速導入したいと思います。
が、ほかのスクリプトも使ってる場合、window.onload = function(){
をつかっても不具合はおきないのでしょうか?

投稿: nakaniwa | 2008.04.18 11:13

nakaniwaさん、またまたコメントありがとうございます!

実は僕がいつも使っているロールオーバー時に画像を書き換えるJavaScript(とても便利です)が動きませんでした。
しかし、to-Rさんの下記のページで解決方法が載っているようです。参考にしてみて下さい。
(バタバタしてましてまだ試していませんが…)
http://blog.webcreativepark.net/2007/09/13-135024.html

ちなみに、元のJavaScriptは下記のページからダウンロードできます。
http://www.dnolan.com/code/js/rollover/

一応、Lightboxとは共存させても上手く動きましたので、ご報告まで。

-------------------
そしてもう1つ、
highlight.htmlの48行目あたりですが、trを閉じるタグを付け忘れていました。お手数をお掛けしますが、追加してお使い下さい。
※現在のダウンロードデータは直してあります。

投稿: exyz | 2008.04.18 14:41

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/40896565

この記事へのトラックバック一覧です: マウスオーバーした行をハイライト表示するテーブル:

« デフォルトスタイルをリセットするCSS | トップページ | テーブルの列をソートできるようにする »