JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇
jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...
jQueryテンプレート42選!
ホーム
jQuery
jQuery プラグイン
jQuery UI
人気順
カテゴリ
キーワード
クール
新着
ツリー
jQuery PDF
ホット
サイト情報
サイトマップ
★ 新着サンプルトップ50のRSSを購読する
◆ DHTMLサンプル(基礎)のRSSを購読する
◆ DHTMLサンプル(応用)のRSSを購読する
◆ AJAXサンプルのRSSを購読する
◆ その他サンプルのRSSを購読する
◆ BOM(Browser Object Model)のRSSを購読する
◆ DOM(Document Object Model)のRSSを購読する
テーブルの行/列をハイライトする
説明
補足説明
コード
関連書籍
コメント投稿
このサンプルは、jQueryのtablehover()プラグインを利用して テーブルの行/列をハイライトします。サンプルのテーブル上にマウスを移動するとカレントの行／列がハイライトされます。カレントのセルは異なる色で表示されます。
このサンプルを編集して試してみる
$('#demotable').tableHover({ colClass: 'hover', cellClass: 'hovercell', clickClass: 'click' });
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery - Table Hover </title> <link href="jQuery/tableHover/style.css" rel="stylesheet" type="text/css" /> <link href="jQuery/tableHover/tablehover.css" rel="stylesheet" type="text/css" /> <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script> <script src="jQuery/tableHover/jquery.tablehover.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('#demotable').tableHover({ colClass: 'hover', cellClass: 'hovercell', clickClass: 'click' }); }); </script> </head> <body> <table id="demotable"> <thead> <tr><th colspan="2">A</th><th colspan="2">B</th><th colspan="2">C</th><th colspan="2">D</th></tr> <tr><th>A+</th><th>A-</th><th>B+</th><th>B-</th><th>C+</th><th>C-</th><th>D+</th><th>D-</th></tr> </thead> <tfoot> <tr><td>11</td><td>4</td><td>9</td><td>8</td><td>2</td><td>2</td><td>1</td><td>4</td></tr> </tfoot> <tbody> <tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td></tr> <tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td></tr> <tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr> <tr><td>-</td><td>-</td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td></tr> <tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td><a href="#">X</a></td></tr> <tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td><a href="#">X</a></td></tr> <tr><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td></tr> <tr><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td></tr> <tr><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td>-</td><td><a href="#">X</a></td><td>-</td></tr> <tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td></tr> <tr><td><a href="#">X</a></td><td>-</td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td></tr> <tr><td><a href="#">X</a></td><td><a href="#">X</a></td><td><a href="#">X</a></td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr> </tbody> </table> </body> </html>
コメント・提案の投稿！
名前
メール
件名
本文
送信中です...
ASP.NET 3.5
|
Akio's Blog