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

Posted 2021-05-11

//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>