0

我想知道是否有可能以一种简单的方式，当我使用 while 函数调用一堆数据并将它们放入表中但我想使用 CSS 使其成为具有常规背景的一行和具有浅色背景的一行。

希望我说的有道理......

这就是我所拥有的：

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-childor: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 为表格行显示单一颜色。它不会阻止人们使用该网站，所以只需将更好看的东西留给更好的浏览器。
  • 但是有一些 javascript hack 可以:nth-child为旧版本的 IE 添加对选择器的支持。我推荐的最好的是http://selectivizr.com/。现在您甚至可以在较旧的 IE 版本中使用高级 CSS。
  • 如果您不想这样做，但确实需要在 IE 中显示行颜色，那么您剩下的唯一选择就是向行添加类。只需为奇数行和偶数行配置两个类，并根据需要将类添加到每一行。这可以在页面加载时在您的 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 回答