横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
マウスオーバーでテーブル桁をハイライト表示にする。
ストライプテーブルは背景桁を変更することで、テーブルを見やすくしています。
マウスカーソルのある桁をハイライト表示にします。
jQueryの書き方 |
//*------------------------------------ */ // 41-07. マウスオーバーでテーブル桁をハイライト表示 /*------------------------------------ */ $("#tbl_417 th:nth-child(odd)").addClass("odd"); $("#tbl_417 tr:nth-child(even)").addClass("even"); $("#tbl_417 td") .mouseover(function(){ $("#tbl_417 td:nth-child("+($("#tbl_417 td") .index(this)%$("#tbl_417 th") .size()+1)+")") .addClass("hover");}) .mouseout(function(){ $("#tbl_417 td:nth-child("+($("#tbl_417 td").index(this)%$("#tbl_417 th") .size()+1)+")") .removeClass("hover"); }); |
---|---|
cssの書き方 |
//*------------------------------------------------------- 41-07. 列のハイライト -------------------------------------------------------- */ #tbl_417{ width: 600px; float: left; margin: 10px 0 0 35px; } #tbl_417 tr{ height: 30px; /* セルの高さ */ background-color: #C0C0C0; /*灰色*/ } #tbl_417 .even{ background-color:#3399FF; } #tbl_417 .odd{ background-color: #808080; /*濃灰色*/ } #tbl_417 .hover{ background-color: #B2D8FF; } #tbl_417 th{ width:120px; text-align:center; background-color: #000080; /*紺色*/ color:white; } #tbl_417 td{ width:120px; /*セルのサイズ幅*/ padding:5px; text-align: right; font-size:small; } #tbl_417 td.left{ text-align: left; } #tbl_417 td.center{ text-align: center; } |
HTMLの書き方 |
<table id="tbl_417"> <tr> <th>番号</th> <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 |