copyright

株式会社アイネックスはソフトウェアの開発、検証ツールの支援企業です。

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

jQuery

41-01)　 1.　　:first-child擬似クラス(セレクター)

first-child擬似クラスは、フォームの部品を選択するフィルター機能のセレクターです。

:first-child擬似クラス
 特定のセレクタのうち、最初の要素を記述する。

書式；　$("要素名：first-child")

41-01)　2.　:first-child擬似クラス(セレクター)ーでストライプテーブルを作る

　

first-child擬似クラス(セレクター)
タイトル部の背景色は th要素で設定し、奇数列の要素はth:nth-child(odd)で設定する。
データ部の背景色はtr要素で設定し、偶数行はtr:nth-child(even)で設定します。
標準的なストライプテーブルを作成します。

jQueryの書き方 ----------------------
ｃｓｓの書き方 /*-------------------------------------------------------
41-01.　CSS3を使った実装（ストライプテーブル）
-------------------------------------------------------- */
#tbl_411{
width: 600px;
float: left;
margin: 10px 0 0 35px;
}
#tbl_411 tr{
height:30px; /* ｾﾙの高さ　*/
background-color: #99CCFF; /* 水色　*/
}
#tbl_411 tr:nth-child(even){
background-color:#C0C0C0; /* 灰色　*/
}
#tbl_411 th{
width:120px; /*ｾﾙのサイズ幅*/
text-align:center;
color:white;
background-color:maroon; /* 栗色　*/
}
#tbl_411 th:nth-child(odd){
background-color:orange; /* オレンジ色　*/
}
#tbl_411 td{
text-align: right;
padding: 0 10px 0 20px;
font-size: small;
}
#tbl_411 td.left{
text-align: left;
}
#tbl_411 td.center{
text-align: center;
}
HTMLの書き方 <div id="tbl_411">
  <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