TABLEの行の色を一行おきに変える

テーブルの行の色を一行おきに変えたいことがある。

クラス名とかbgcolorで変えてもいいのだが意味的にはまったく意味がないのと、行が増減するたびに書き換えるのでは手間がかかるのはさけられず間違いのもと。
こういう仕事はJavaScriptでやってしまうのが幸せである。

<script type="text/JavaScript" language="JavaScript">
function my_getElementById(id) {
 if (document.getElementById) {
  return document.getElementById(id);
 }
 else if (document.all) {
  return document.all(id);
 }
 else if (document.layers) {
  return document.layers[id]
 }
}

function color_tr(table_id, even_color, odd_color) {
 even_color ? '' : even_color = '#dddddd';
 odd_color ? '' : odd_color = '#ffffff';
 obj = my_getElementById(table_id);
 for (k=0; k<obj.rows.length;k++){
  if (( (k+1) % 2) == 0) {
   obj.rows[k].bgColor = even_color;
  }
  else{
   obj.rows[k].bgColor = odd_color;
  }
 }
}
</script>

<table border="1" cellpadding="2" cellspacing="2" id="mytable" summary="テーブル">
 <caption>テーブル</caption>
 <tbody>
  <tr>
   <th>ROW1 TH</th>
   <td>ROW1 TD1</td>
  </tr>
  <tr>
   <td>ROW2 TD1</td>
   <td>ROW2 TD2</td>
  </tr>
  <tr>
   <td>ROW3 TD1</td>
   <td>ROW3 TD2</td>
  </tr>
  <tr>
   <td>ROW4 TD1</td>
   <td>ROW4 TD2</td>
  </tr>
 </tbody>
</table>

<script type="text/JavaScript" language="JavaScript">
 color_tr('mytable', '#000000', '#ffcccc');
</script>

Leave a Reply