jQueryでテーブル（table）を操作する小回り系コード5種

html

始めに操作するべきテーブルを用意します。
ごくごく普通のテーブルですね。

1
<table class="table01">
2
  <tr>
3
    <th>商品名</th>
4
    <th>入荷日</th>
5
    <th>価格</th>
6
  </tr>
7
  <tr>
8
    <td>椅子</td>
9
    <td>2011-08-01</td>
10
    <td>&yen; 2,800</td>
11
  </tr>
12
  <tr>
13
    <td>机</td>
14
    <td>2011-08-08</td>
15
    <td>&yen; 6,800</td>
16
  </tr>
17
  <tr>
18
    <td>本棚</td>
19
    <td>2011-09-03</td>
20
    <td>&yen; 9,800</td>
21
  </tr>
22
  <tr>
23
    <td>ベッド</td>
24
    <td>2011-09-11</td>
25
    <td>&yen; 16,800</td>
26
  </tr>
27
  <tr>
28
    <td>自転車</td>
29
    <td>2011-09-21</td>
30
    <td>&yen; 98,000</td>
31
  </tr>
32
</table>

1.テーブルをストライプ模様にする

テーブル+javascriptといったらこれってくらいよく使われるのではないでしょうか。
まずは基本のストライプ模様にするです。

1
$(function() {
2
  $('.table01 tr:odd').addClass('odd');
3
});

「odd」は奇数という意味で、「even（偶数）」というセレクターもあります。
ただjQueryでは0から数えるとかなんとかで奇数・偶数が逆になります。

あとはcssをこんな感じにします。

1
table tr.odd td {
2
  background: #FFFFE8;
3
}

「background」で直接色を変更する方法もありますが、「addClass」でクラスを割り当てて色などはcssで指定した方があとあと修正が楽だと思います。

テーブル個別に数える

上記のやり方だとテーブル全体で数えるので複数テーブルがある場合ストライプが２つめ以降ずれてしまう場合があります。
すべてのテーブルを同じ順番でストライプしたい場合は下記のようにします。

1
$(function() {
2
  $('.table01 tr:nth-child(odd)').addClass('odd');
3
});

列でストライプにする

行は「tr」でしたが「td」にすると列になります。

1
$(function() {
2
  $('.table01 td:nth-child(odd)').addClass('odd');
3
});

2.指定列にクラスを追加する

たとえば価格の列だけ右揃えにしたいとか、この列だけ中揃えにしたいとかありますよね。
その場合1列分「td」にクラスを割り当てます。
先ほど使った「nth-child(Xn)」はX個おきに適用するセレクタなので、「nth-child(2n)」「nth-child(3n)」とすれば2,3列目を指定できます。
しかし1列目を選択したいと思って「nth-child(1n)」とかすると1個おきとなるので当然全て指定されていまいますね。
その場合はtrの数だけ繰り返してtdの一つ目（0）にクラスを割り当てればいけます。

1
$('.table01 tr').each(function(i){
2
  $('td',this).eq(0).addClass('over');
3
});

3.マウスオーバーで色を変える

マウスオーバーされた行だけ色が変わるとわかりやすいことがありますね。
行なら「tr」のhoverに設定すればいいだけなので簡単です。

1
$(function() {
2
  $('.table01 tr').hover(
3
    function(){
4
      $(this).addClass('over');
5
    },
6
    function(){
7
      $(this).removeClass('over');
8
    }
9
  );
10
});

縦列の色も変える

横+縦でクロスさせてマウスオーバーさせる場合は前述の列にクラスを適用と組み合わせます。

1
$('.table01 td').hover(
2
  function(){
3
    $(this).parent().addClass('over');
4
    var currentNum = $(this).index();
5
    $('tr',$(this).parent().parent()).each(function(i){
6
      $('td',this).eq(currentNum).addClass('over');
7
    });
8
  },
9
  function(){
10
    $(this).parent().removeClass('over');
11
    var currentNum = $(this).index();
12
    $('tr',$(this).parent().parent()).each(function(i){
13
      $('td',this).eq(currentNum).removeClass('over');
14
    });
15
  }
16
);

「.parent().parent()」となってあまりよくない感じですね。もっと良いやり方があるのではないかと思います。

4.連番IDの列（カラム）を追加する

列を追加して自動的に連番を割り当てる方法です。

1
$('.table01 tr').each(function(i) {
2
  if(i != 0) {
3
    $(this).prepend('<td>'+ i +'</td>');
4
  } else {
5
    $(this).prepend('<th>id</th>');
6
  }
7
});

詳しくはこちらの記事もご覧ください。

jQueryでテーブルに連番idの列（カラム）を追加する

5. 一定の数値ごとに色を変化させる

サンプルの表には価格の項目があるので、この価格が3000円以下、10000円以下、それ以上という条件で色を変化させてみます。

1
$('.table01 tr').each(function() {
2
  //3番目のカラムを取得
3
  var price = $('td', this).eq(2).text();
4
  //価格を数値に変換
5
  price = price.replace(/,|\¥ /gi,'');
6
  if (price < 3000) {
7
    $(this).addClass('level1');
8
  } else if (price < 10000) {
9
    $(this).addClass('level2');
10
  } else {
11
    $(this).addClass('level3');
12
  }
13
});

今回は価格に「¥ 」と「,」が入っていたので4行目の正規表現でこれらを取り除いています。
プレーンな数値でしたらこの処理は必要ありません。