行の背景色を交互に変えると見栄えするし、見る方も行の中身を把握しやすくなる。
CSSを使う方法が一番最初に上がると思う、調べるとjqerryを使用する場合、ブラウザー依存性があるので、CSSでclassで色を指定する方法が設定は簡単だが、tr、tdにclass=""などと埋め込む必要がある。
そこで少しマイナーだと思うがPHPでMySQLのデータを呼び出した時、tr、td の行を交互に変える方法を書いてみたい。
PHPでMySQLのデータを呼び出すとき、ある条件のデータをクエリーで選び出し表示するという事が良くある。その際、table文で吐き出すとHTML的には綺麗に表示される。
まず、交互にデータの背景色を替えるためには、その行が、偶数か奇数かで判定すれば良いと考え付くだろう。そのために繰り返し呼び出されるデータが偶数か奇数か判定する必要がある。
その式が下である。
if($cnt%2 == 0){ $tr_col="<tr style=\"background: #eeffff;\">"; } elseif($i%2 == 1) { $tr_col="<tr>";}
交互の場合は、elseifはelseでも良い。
※$cnt%2は$cntを2で割った余りを求める式
当然PHP文内で書かれるため一部のダブルクォーテーションは、エスケープしてある。
例えばwhile文でデータを繰り返し呼び出すような場合、
$cnt = 1 //偶数行の色が変わる、奇数行を変える場合0 echo "<table>"; echo "<tr><th>○○○</th><th>△△△</th><th>×××</th></tr>"; while ($row = mysql_fetch_array($res)){ if($cnt%2 == 0){ $tr_col="<tr style=\"background: #eeffff;\">"; } elseif($i%2 == 1) { $tr_col="<tr>";} echo $tr_col; echo "<td>".$row["aaa"]."</td>"; echo "<td>".$row["bbb"]."</td>"; echo "<td>".$row["ccc"]."</td>"; echo "</tr>"; $cnt++; } echo "</table>";
これで、偶数行の背景色が変わるようになる。また、テーブルの設定していない部分の要素は、CSSで設定して置けば良い。
これで少し見栄えの良くなるテーブルができると思う。