株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

　　　　　横浜、東京に拠点を置き、検証システム／金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

jQuery

41-04)　1.　jQuery(cssにClass属性の追加)を使った実装

　

jQuery(cssにClassの追加)を使った実装について。
first-child擬似クラスセレクターを利用して、奇数行のth要素、偶数行のｔｒ要素に
addClass（）メドッドを用いてクラス属性を追加します。
動作；　ボタン（背景色（タイトル部）変更）をクリックすると、タイトル部の背景色を変更し、
　　　　　ボタン（背景色（データ部）変更をクリックすると、データ部の背景色を変更する。

jQueryの書き方 /*------------------------------------ */
//41-04.　jqueryを使った実装
/*------------------------------------ */
//.click()　イベント
$("#btn_41041").click(function(){
  $("th:nth-child(odd)").addClass("odd");
});
$("#btn_41042").click(function(){
  $("tr:nth-child(even)").addClass("even");
});
$("#btn_41043").click(function(){
  $("th:nth-child(odd)").removeClass("odd");
  $("tr:nth-child(even)").removeClass("even");
});
ｃｓｓの書き方 /*-------------------------------------------------------
41-04.　jqueryを使った実装1
-------------------------------------------------------- */
#tbl_414{
width: 600px;
float: left;
margin: 10px 0 0 35px;
}
#tbl_414 tr{
height: 30px; /* ｾﾙの高さ　*/
background-color: #C0C0C0; /*薄い灰色*/
}
#tbl_414 .odd{
background-color: #808080; /*濃い灰色*/
}
#tbl_414 .even{
background-color: #99CCFF; /*水色*/
}
#tbl_414 th{
width:120px;
text-align:center;
background-color:#000080; /*紺色*/
color:white;
}
#tbl_414 td{
width:120px; /*ｾﾙのサイズ幅*/
padding:5px;
text-align: right;
font-size:small;
}
#tbl_414 td.left{
text-align: left;
}
#tbl_414 td.center{
text-align: center;
}
HTMLの書き方 <table id="tbl_414">
  <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_41041" class="btnStd_170 Gray">背景色（タイトル部）変更</button>　
<button id="btn_41042" class="btnStd_170 Gray">背景色（データ部）変更）</button>　
<button id="btn_41043" 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