HTMLでは画面をつくり、css ではデザインを行います。
そして、JavaScript で動作を行うというようになります。

今回は、java script の1つである
jQuery を使うことで、テーブルの偶数、奇数の行に色をつけてみます。

まずは無料で使える Atom エディタを使い。HTMLから書いていきます。

なお、作業効率を挙げるため、今回は Atom に追加パッケージで
Emmet と Preview HTML パッケージをいれています。

Emmet はHTMLの省略記法で、チートシートなどで検索すると見つかります。

まずは簡単にテーブルを作成してみましょう。

今回の開発環境は Ubuntu 14.04 ですが、
Atom エディタは Windwos Mac Linux のどれでも使えます。

Atom を起動し、


tab キーを押すと展開できます

となります

次に、body の中にテーブルを作成します。

これも Emmet で簡単に作成できます。

を記述しますが、これを Emmet を使うと簡単に書けます

次に Java script と jQuery の読み込みをします。
webページの動作を裏方で行う java script 関連は script タグの中に記述します。

方法はいくつかありますが、今回はネットワーク経由での
jQuery ファイルを読み込むようにします。
注意点としては、自作の java script ファイルを読み込む前に、
jQuery 関連のファイルを読み込むという順番です。
これを守らないと、jQuery が反映されません。

ネットワーク経由の場合、CDNというファイル置き場から読み込みを行い、
場所は様々なところにあります。
今回は Google から読み込むようにします。

これで準備ができたので、次に行の奇数、偶数に応じて色をつけます。

jQUery を使うと、偶数の判定には :even
奇数の判定には :odd を使うことで簡単に反映ができます。

まずは、色を付けない状態をみてみましょう。

Screenshot from 2016-05-21 22:46:13

これを jQuery を使うことで色をつけてみます。
なお、スタイルの設定は .css() を使うことで簡単に設定ができます。

ソースの解説をしますと、

の部分は対象とする場所です。
table タグを対象として、
.color-table は class=”color-table” というクラスを指します。
ちなみに、IDを指定するのなら、. ではなく # を使います。

そして、tr:even なので tr の偶数行を指定していることになります。

の部分は適用するCSS内容です。

これにより、テーブルの奇数行は赤になり、偶数行は青になっているのがわかります。

Screenshot from 2016-05-21 22:49:50