tableで、しましましたい

Tweet

Category css, html5, JavaScript 2013/04/03

問題

よくある表の表示で偶数行がグレー、奇数行が白みたいな、縞々の表示がしたいけど、どうするのがよい？

答え

10年前なら、サーバー側で見た目のことも考慮して、あとは表示するだけのHTMLを出力したものですが、

<table>
<?php
$line_no = 0;
foreach ($data as $k => $v) {
    ++$line_no;
    if ($line_no % 2) {
        //奇数行はこのクラスを付与
        $class_name = "darkLine";
    } else {
        //偶数行はこのクラスを付与
        $class_name = "lightLine";
    }
?>
    <tr class="<?= $class_name ?>">
        <td>

今なら、ブラウザ（JavaScript、CSS）にお任せするのもありですね。

HTMLはこんな感じで、tableにクラスでも付与しておくだけにして、

<table class="table-striped">
<?php foreach ($data as $k => $v) { ?>
    <tr>
        <td>
            <!-- ブラウザ側でやるから、見た目なんて気にしないで！ -->

しましまは、対応ブラウザ IE9以降でよければ、CSS3で。

.table-striped tbody tr:nth-child(even) {background:#eee;}
.table-striped tbody tr:nth-child(odd) {background:#fff;}

IE8を考慮するなら、今はJavaScriptで。

//偶数行と奇数行にそれぞれclassを付与
$('.table-striped').each(function(){
    $('tbody tr:even', this).addClass('darkLine');
    $('tbody tr:odd', this).addClass('lightLine');
});