[CSS3, jQuery] 1行毎にテーブルの背景色を変更する4つの方法

※2012年8月5日追記: テーブルが2つ以上あると色がおかしくなるバグがありました。jquery.paint_table.jsを以下のようにすると直ります。

//var numTh = $("table").find("th").length;
var numTh = $(this).find("th").length;

// $("table tr").each(function() {
$(this).find("tr").each(function() {

この記事では、CSS3とjQueryを使ってテーブルの背景色を奇数と偶数で変更する、4種類のサンプルを載せています。その4種類は、「CSS3を利用」・「jQueryを利用」・「jQueryを利用(rowspanあり)」・「jQueryを利用(rowspanあり+プラグイン化)」です。

目次

  1. CSS3を利用したサンプル
  2. jQueryを利用したサンプル
  3. jQueryを利用したサンプル(rowspanあり)
  4. jQueryを利用したサンプル(rowspanあり+プラグイン化)

CSS3を利用したサンプル

1番目はCSS3の「:nth-child」というセレクタを利用したものです。これを使うと、n番目の子要素に対して、特定のスタイルを適用することができます。例えばdivタグ内の、5番目のpタグの文字を太字にしたい場合、

div p:nth-child(5) { font-weight: bold; }

といった具合に書くことができます。

これを使ってテーブルの奇数行と偶数行の背景色は、

table tr:nth-child(odd) {
  /* 奇数行の背景色を設定します。 */
  background-color: #ffeeff;
}
table tr:nth-child(even) {
  /* 偶数行の背景色を設定します。 */
  background-color: #eeffff;
}

といった具合に書けば変更することができます。テーブルの一番上から1番目、2番目とカウントされるため、この場合はテーブルの一番上の行が奇数行、上から2番目が偶数行になります。

以下がサンプルコードになります。なお、下の「common.css」というファイルは、この記事のサンプル全体で共通して使用するファイルです。

sample1.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>1行おきに背景色を変えるサンプル1 - CSS3を利用</title>
    <link rel="stylesheet" href="common.css" />
    <style>
      table tr:nth-child(odd) {
        /* thの行から数えて奇数行の背景色を設定します。 */
        background-color: #ffeeff;
      }
      table tr:nth-child(even) {
        /* thの行から数えて偶数行の背景色を設定します。 */
        background-color: #eeffff;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>商品番号</th><th>商品名</th>
      </tr>
      <tr>
        <td>I00001</td><td>商品1</td>
      </tr>
      <tr>
        <td>I00002</td><td>商品2</td>
      </tr>
      <tr>
        <td>I00003</td><td>商品3</td>
      </tr>
      <tr>
        <td>I00004</td><td>商品4</td>
      </tr>
      <tr>
        <td>I00005</td><td>商品5</td>
      </tr>
      <tr>
        <td>I00006</td><td>商品6</td>
      </tr>
    </table>
  </body>
</html>

common.css

body {
}
table {
  margin: 0 auto;
  width: 400px;
}
table, th, td {
  border: 1px solid #ccc;
}
th, td {
  padding: 5px 15px;
}
th {
  background-color: #666;
  color: #fff;
}
/* この下にあるodd,evenクラスは、jQueryで色を付ける場合に使用します。 */
.odd {
  background-color: #eeffff;
}
.even {
  background-color: #ffeeff;
}

↑ 目次に戻る

jQueryを利用したサンプル

1番目のサンプルと同じ効果をjQueryの、「odd」・「even」セレクタを使えば実現できます。例えば奇数行に「odd」クラス、偶数行に「even」クラスを付ける場合、

$(function() {
  $("table").find("tr:odd").addClass("odd");
  $("table").find("tr:even").addClass("even");
})

と書くことができます。なお、CSS3の時のサンプルと違ってテーブルの1番上から0,1,2と番号が振られるため、テーブルの一番上に「even」、2番目に「odd」クラスが付与される点にご注意ください。

また、jQueryには「nth-child」セレクタも用意されているので、以下のように書くこともできます。

$(function() {
$("table").find("tr:nth-child(odd)").addClass("odd");
$("table").find("tr:nth-child(even)").addClass("even");
})
```この場合はCSS3のサンプルと同じく<b class="rfocus">テーブルの1番上の行に「odd」、2番目の行に「even」クラス</b>が追加されます。

それでは2番目のサンプルのコードを記載します。

<h3>sample2.html</h3>

</code></pre>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>1行おきに背景色を変えるサンプル2 - jQueryを利用</title>
<link rel="stylesheet" href="common.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
/* 一番上のtdから数えて奇数行に「odd」クラスを追加します。 <em>/
$("table").find("tr:odd").addClass("odd");
/</em> 一番上のtdから数えて偶数行の「even」クラスを追加します。 */
$("table").find("tr:even").addClass("even");
})
</script>
</head>
<body>
<table>
<tr>
<th>商品番号</th><th>商品名</th>
</tr>
<tr>
<td>I00001</td><td>商品1</td>
</tr>
<tr>
<td>I00002</td><td>商品2</td>
</tr>
<tr>
<td>I00003</td><td>商品3</td>
</tr>
<tr>
<td>I00004</td><td>商品4</td>
</tr>
<tr>
<td>I00005</td><td>商品5</td>
</tr>
<tr>
<td>I00006</td><td>商品6</td>
</tr>
</table>
</body>
</html>

<pre><code><br /><p class="back-to-index"><a href="#index-0">↑ 目次に戻る</a></p>

<h2 id="index-3">jQueryを利用したサンプル(rowspanあり)</h2>

上記CSS3を使った方法とjQueryを使った方法ですが、テーブルが複雑になった場合には対処しきれない場合があります。例えばrowspanが設定された場合なんかです。

<img src="__uploads_dir__/2012/06/paint_table_color_02.png" alt="rowspanが設定されると、背景色がぐちゃぐちゃになってしまう。。。" />

その場合は上記コードを修正する必要があります。
</code></pre>

$(function() {
var numTh = $("table").find("th").length;
var isEven = true;
$("table tr").each(function() {
if (numTh == $(this).find("td").length) {
isEven = !isEven;
}
/* 一番上のtdから数えて奇数行に「odd」、偶数行に「even」クラスを追加
します。 */
$(this).find("td").addClass(isEven ? "even" : "odd");
});
})

<pre><code>こんな感じに書くと、thの行の列数をと同じ列数を持つ行が現れたときに、行の切り替わりと判定するようになります。そして行が変わったらtdに付与する「odd」・「even」クラスも切り替えています。

<img src="__uploads_dir__/2012/06/paint_table_color_03.png" />

以下がコード全体になります。

<h3>sample3.html</h3>

</code></pre>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>1行おきに背景色を変えるサンプル3 - jQueryを利用(rowspanあり)</title>
<link rel="stylesheet" href="common.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
var numTh = $("table").find("th").length;
var isEven = true;
$("table tr").each(function() {
if (numTh == $(this).find("td").length) {
isEven = !isEven;
}
/* 一番上のtdから数えて奇数行に「odd」、偶数行に「even」クラスを追加します。 */
$(this).find("td").addClass(isEven ? "even" : "odd");
});
})
</script>
</head>
<body>
<table>
<tr>
<th>商品番号</th><th>商品名</th><th>色</th>
</tr>
<tr>
<td rowspan="3">I00001</td><td rowspan="3">商品1</td><td>赤</td>
</tr>
<tr><td>青</td></tr>
<tr><td>緑</td></tr>
<tr>
<td>I00002</td><td>商品2</td><td>黄</td>
</tr>
<tr>
<td rowspan="2">I00003</td><td rowspan="2">商品3</td><td>赤</td>
</tr>
<tr><td>黒</td></tr>
<tr>
<td rowspan="7">I00004</td><td rowspan="7">商品4</td><td>赤</td>
</tr>
<tr><td>橙</td></tr>
<tr><td>黄</td></tr>
<tr><td>緑</td></tr>
<tr><td>青</td></tr>
<tr><td>藍</td></tr>
<tr><td>紫</td></tr>
</table>
</body>
</html>

<pre><code><br /><p class="back-to-index"><a href="#index-0">↑ 目次に戻る</a></p>

<h2 id="index-4">jQueryを利用したサンプル(rowspanあり+プラグイン化)</h2>

最後にrowspanに対応した、テーブルの背景色を変更するコードをプラグイン化してみます。

<h3>jquery.paint_table.js</h3>

</code></pre>

(function($) {
$.fn.paintTable=function(config) {
var defaults = {
};

<pre><code>return this.each(function() {
// var numTh = $("table").find("th").length;
var numTh = $(this).find("th").length;
var isEven = true;
// $("table tr").each(function() {
$(this).find("tr").each(function() {
if (numTh == $(this).find("td").length) {
isEven = !isEven;
}
$(this).find("td").addClass(isEven ? "even" : "odd");
});
});
</code></pre>

};
})(jQuery);

<pre><code><br />このプラグインを使用する場合は同ファイルを読み込み、テーブルに対して「paintTable」メソッドを実行するだけでテーブルの色が変わります。例えば、
</code></pre>

$("table").paintTable();
```
といった形です。

今回使ったサンプルのリンク

↑ 目次に戻る

この記事が役に立った場合、シェアしていただけると励みになります!!