横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
jQueryを使ったストライプテーブルの実装について。
first-child擬似クラスセレクターを利用して、奇数行のth要素、偶数行のtr要素に
addClass()メドッドを用いてクラス属性を追加します。
jQueryの書き方 |
/* -----------------------------------------* // 41-05 背景色を変更する * -----------------------------------------*/ $("th:nth-child(odd)").addClass("odd"); $("tr:nth-child(even)").addClass("even"); |
---|---|
cssの書き方 |
/*------------------------------------------------------- 41-05. jqueryを使った実装2 -------------------------------------------------------- */ #tbl_415{ width: 600px; float: left; margin: 10px 0 0 35px; } #tbl_415 tr{ background-color: #C0C0C0; /*灰色*/ height: 30px; /* セルの高さ */ } #tbl_415 .odd{ background-color: #808080; /*濃灰色*/ } #tbl_415 .even{ background-color: #99CCFF; /*水色*/ } #tbl_415 th{ width:120px; text-align:center; background-color:#000080; /*紺色*/ color:white; } #tbl_415 td{ width:120px; /*セルのサイズ幅*/ padding:5px; text-align: right; font-size:small; } #tbl_415 td.left{ text-align: left; } #tbl_415 td.center{ text-align: center; } |
HTMLの書き方 |
<div id="tbl_415"> <table> <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> </div> |
番号 | 会社名 | 売上高 | 営業利益 | 経常利益 |
---|---|---|---|---|
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 |