横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
マウスオーバーでテーブル行、桁をハイライト表示にする。
ストライプテーブルは背景桁を変更することで、テーブルを見やすくしています。
マウスカーソルのある行、桁をハイライト表示にします。
jQueryの書き方 |
/*------------------------------------ */ // 41-08. マウスオーバーでテーブル行、桁をハイライト表示 /*------------------------------------ */ $("#tbl_418 th:nth-child(odd)").addClass("odd"); $("#tbl_418 tr:nth-child(even)").addClass("even"); $("#tbl_418 tr:not(:first-child)") .mouseover(function(){ $(this).addClass("hover"); }) .mouseout(function(){ $(this).removeClass("hover"); }); $("#tbl_418 td") .mouseover(function(){ $("#tbl_418 td:nth-child("+($("#tbl_418 td") .index(this)%$("#tbl_418 th") .size()+1)+")") .addClass("hover");}) .mouseout(function(){ $("#tbl_418 td:nth-child("+($("#tbl_418 td").index(this)%$("#tbl_418 th") .size()+1)+")") .removeClass("hover"); }); |
---|---|
cssの書き方 |
/*------------------------------------------------------- 41-08. 行列のハイライト -------------------------------------------------------- */ #tbl_418{ width: 600px; float: left; margin: 10px 0 0 35px; } #tbl_418 tr{ height: 30px; /* セルの高さ */ background-color: #C0C0C0; /*灰色*/ } #tbl_418 .even{ background:#3399FF; } #tbl_418 .odd{ background:#C0C0C0; } #tbl_418 .hover{ background:#B2D8FF; } #tbl_418 th{ width:120px; text-align:center; background-color: #000080; /*紺色*/ color:white; } #tbl_418 td{ width:120px; /*セルのサイズ幅*/ padding:5px; text-align: right; font-size:small; } #tbl_418 td.left{ text-align: left; } #tbl_418 td.center{ text-align: center; } |
HTMLの書き方 |
<table id="tbl_418"> <tr> <th>番号</th> <th>会社名</th> <th>売上高</th> <th>経常利益</th> </tr> <tr> <td class="center">1</td> <td class="left">横浜証券</td> <td>1,945,074</td> <td>155,718</td> <td>153,103</td> </tr> <tr> <td class="center">2</td> <td class="left">東京証券</td> <td>2,745,074</td> <td>255,718</td> <td>233,103</td> </tr> ------ (省略) ------- </table> |
番号 | 会社名 | 売上高 | 営業利益 | 経常利益 |
---|---|---|---|---|
1 | 横浜証券 | 1,945,074 | 155,718 | 153,103 |
2 | 東京証券 | 2,745,074 | 255,718 | 233,103 |
3 | 川崎証券 | 3,745,074 | 325,718 | 333,103 |
4 | 静岡証券 | 4,745,074 | 445,718 | 433,103 |
5 | 埼玉証券 | 5,745,074 | 545,718 | 533,103 |
6 | 神奈川証券 | 6,745,074 | 645,718 | 633,103 |
7 | 銀座証券 | 7,745,074 | 745,718 | 733,103 |
8 | 大手町証券 | 8,745,074 | 845,718 | 833,103 |