0

while関数を使用して大量のデータを呼び出してテーブルに配置するのは簡単な方法で可能かどうか疑問に思っていますが、CSSを使用して、通常の背景の1行と明るい背景の1行を作成したいと思います。

うまくいけば、私が言ったことは理にかなっています。

これは私が持っているものです：

echo "<style type='text/css'>";
echo "th {background: #CEED5E;}";
echo "</style>";


echo "<table border=1>";
    echo "<tr><th>Product ID</th><th>Title</th><th>Author</th><th>Description</th></tr>";


while ($row = mysqli_fetch_assoc($result))
{
    echo "<tr><td>" . $row["id"] . "</td><td>" . $row["title"] . "</td><td>" . ucwords(strtolower($row["authorFirstName"] . " " . $row["authorLastName"])) . "</td><td>" . $row["description"] . "</td></tr>";

}

echo "</table>";
4

4 に答える 4

1 
echo "<style type='text/css'>";
echo ".normalbackground {background-color: white;}";
echo ".coloredbackground {background-color: #CEED5E;}";
echo "</style>";


echo "<table border=1>";
echo "<tr><th>Product ID</th><th>Title</th><th>Author</th><th>Description</th></tr>";

$i = 0;
while ($row = mysqli_fetch_assoc($result))
{
$i++; if (($i % 2) == 0) {$class = "coloredbackground";} else {$class = "normalbackground";};
echo "<tr><td class="$class">" . $row["id"] . "</td><td class="$class">" . $row["title"] . "</td><td class="$class">" . ucwords(strtolower($row["authorFirstName"] . " " . $row["authorLastName"])) . "</td><td class="$class">" . $row["description"] . "</td></tr>";

}

echo "</table>";
于 2013-03-26T11:46:24.677 に答える
1

CSSは、PHPコードで特定のことを行う必要なしに、カラーテーブルの行を交互に簡単に実行できます。

:nth-childまたは:nth-of-typeセレクターでそれを行うことができます。

例：

.mytable tr:nth-child(even) {background: #CCC;}
.mytable tr:nth-child(odd) {background: #FFF;}

W3Cのドキュメントも参照してください：http ：//www.w3.org/Style/Examples/007/evenodd.en.html

唯一の注意点は、これがIE8以前ではサポートされていないことです。しかし、一般的に使用されている他のすべてのブラウザーはそれを問題なくサポートしているので、IE6 / 7/8のサポートなしで生活できるのであれば、それを実行すれば問題ありません。

IE8以前をサポートする必要がある場合は、いくつかのオプションがあります。

  • 明らかなオプションは、そのままにして、IE8にテーブル行の単一の色を表示させることです。それは人々がサイトを使用するのを妨げることはないので、より良いブラウザのために見栄えの良いものを残すだけです。
  • :nth-childただし、古いバージョンのIEにセレクターのサポートを追加するjavascriptハックがいくつかあります。私がお勧めするのに最適なのはhttp://selectivizr.com/です。これで、古いIEバージョンでも高度なCSSを使用できます。
  • それをしたくないが、IEで行の色を表示する必要がある場合、残っている唯一のオプションは、行にクラスを追加することです。奇数行と偶数行に2つのクラスを構成し、必要に応じて各行にクラスを追加するだけです。これは、ページが読み込まれるときにPHPコードまたはJSコードで実行できます。ただし、これは理想的なソリューションではありません。Selectivizrの方が優れているのは、古いIEの機能が不足しているために他のブラウザーが影響を受けないことを意味するからです。

お役に立てば幸いです。

于 2013-03-26T11:55:58.987 に答える
0 
$i = 0;
while ($row = mysqli_fetch_assoc($result))
{
    echo "<tr ".($i%2 == 1) ? 'style="background-color:red': ''."><td>" . $row["id"] . "</td><td>" . $row["title"] . "</td><td>" . ucwords(strtolower($row["authorFirstName"] . " " . $row["authorLastName"])) . "</td><td>" . $row["description"] . "</td></tr>";

$i++;
}
于 2013-03-26T11:44:47.137 に答える
0

すべての奇数行または偶数行に特定のクラスを追加し、CSSをそのクラスに適用する必要があります。以下のコード・スニペットを参照してください。

  echo "<style type='text/css'>
            tr {background: #999999;}
            tr.row_odd {background: #EFEFEF;}
        </style>
        <table border=1>
            <tr>
                <th>Product ID</th>
                <th>Title</th>
                <th>Author</th>
                <th>Description</th>
            </tr>
            ";

$count = 0;
while ($row = mysqli_fetch_assoc($result)) {
    echo "<tr".($count%2?'class="row_odd"':'').">
        <td>" . $row["id"] . "</td>
        <td>" . $row["title"] . "</td>
        <td>" . ucwords(strtolower($row["authorFirstName"] . " " . $row["authorLastName"])) . "</td>
        <td>" . $row["description"] . "</td>
    </tr>";

    $count++;
}

echo "</table>";
于 2013-03-26T11:46:24.060 に答える