okuden-labo
3/19/2015 - 7:39 AM

jQuery テーブルの偶数・奇数の行の色を変える

jQuery テーブルの偶数・奇数の行の色を変える

table.html
content_copyfile_download
//javascript
$(function(){
    $("tr:even").addClass("odd");
});
 
//css
table { background: #666; }
tr { background: #fff; }
td { padding: 5px; }
.odd { background: #ddd; }

//html
<table>
  <tr>
    <td>奇数の行</td>
    <td>奇数の行</td>
  </tr>
  <tr>
    <td>偶数の行</td>
    <td>偶数の行</td>
  </tr><tr>
    <td>奇数の行</td>
    <td>奇数の行</td>
  </tr>
  <tr>
    <td>偶数の行</td>
    <td>偶数の行</td>
  </tr>
</table>