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