[ プログラミング ] テーブルセルをストライプに色付け

テーブルのセルの色を交互に変更するのをjQueryを利用して簡単に作成する方法です。

DOMO

HTML

<table class="tb">
   <tr>
      <th>見出し1</th><th>見出し2</th><th>見出し3</th><th>見出し4</th><th>見出し5</th><th>見出し6</th>
   </tr>
   <tr>
      <td>セル1</td><td>セル2</td><td>セル3</td><td>セル4</td><td>セル5</td><td>セル6</td>
   </tr>
   <tr>
      <td>セル1</td><td>セル2</td><td>セル3</td><td>セル4</td><td>セル5</td><td>セル6</td>
   </tr>
   <tr>
      <td>セル1</td><td>セル2</td><td>セル3</td><td>セル4</td><td>セル5</td><td>セル6</td>
   </tr>
   <tr>
      <td>セル1</td><td>セル2</td><td>セル3</td><td>セル4</td><td>セル5</td><td>セル6</td>
   </tr>
   <tr>
      <td>セル1</td><td>セル2</td><td>セル3</td><td>セル4</td><td>セル5</td><td>セル6</td>
   </tr>
   <tr>
      <td>セル1</td><td>セル2</td><td>セル3</td><td>セル4</td><td>セル5</td><td>セル6</td>
   </tr>
   <tr>
      <td>セル1</td><td>セル2</td><td>セル3</td><td>セル4</td><td>セル5</td><td>セル6</td>
   </tr>
</table>

CSS

table.tb {
   border:1px solid #333;
   border-collapse:collapse;
}

table.tb th {
   padding:5px;
   color:#fff;
   border:1px solid #333;
   background:#000;
}

table.tb td {
   padding:5px;
   border:1px solid #333;
}

table.tb .odd {
   background:#ddd;
}

table.tb .even {
   background:#fff;
}

Java Script

$(function(){
   $('table.tb tr:nth-child(odd)').addClass('odd');
   $('table.tb tr:nth-child(even)').addClass('even');
});