WEBサービス創造記

WEBサービスを作ったり保守したりしてる人のメモブログです。

jQueryを利用してtableの奇数行・偶数行で背景色を変更する方法

      2014/11/16

jQueryを利用してtableの奇数行・偶数行で背景色を変更する方法

HTMLヘッダに以下を記述します。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript">
$(document).ready(function(){
  $("table").each(function(){
    jQuery(this).find("tr:even").addClass("even");
  });
});
</script>

HTMLボディ部分のテーブルのコードは以下のとおりです。

<table>
    <tr>
        <th>発言内容</th>
        <th>発言者</th>
    </tr>
    <tr>
        <td>テスト</td>
        <td>Aさん</td>
    </tr>
    <tr>
        <td>テスト</td>
        <td>Bさん</td>
    </tr>
    <tr>
        <td>テスト</td>
        <td>Cさん</td>
    </tr>
</table>

CSSは以下のとおりです。

div#container div#content table{
    font-size:13px;
    border:1px solid #ccc;
}

table tr th{
    padding:3px;
    background-color:#bbb;
    color:#fff;
    padding:3px 6px 3px 3px;
}

table tr.even td{
    background-color:#eee;
}

いくつ行を追加してもjQueryがクラスの定義を行ってくれるため、奇数行・偶数行で異なる背景色が設定されます。

 - jQuery