Question

我有一个数据库和一个名为status的表。状态为0表示unread，状态为1表示read如果状态为0，则单个行应该变为灰色。如果它是1那么它是白色的。

$colors = array("lime", "white");

echo "<style type=\"text/css\">";
echo "tr:hover {";
echo "background: #cc00ff;";
echo "color: white;";
echo "}";
echo "tr {";
echo "font-family: Verdana, Geneva, sans-serif;";
echo "font-size: 13px;";
echo "background: $colors[$status];";
echo "}";
echo "</style>";

$status变量在此处设置：

while ($row = mysql_fetch_row($result))
        {
            echo "<tr>";
           //rows for <table>
            echo "</tr>";
            $status = $row[4];//status table either a 0 or 1
        }

但是，当设置表格行背景时，它会更改所有表格行而不是状态为0的行。

如何根据各自的状态值使各行改变颜色？

Answer 1

您误解了浏览器如何应用CSS。它们基本上具有CSS规则的“全局状态”。当您指定更多规则时（例如，通过<style>或style=），他们只会更新此“全局状态”，然后将其应用于您网页中的每个元素。

要实现您想要的效果，只需将一个类应用于表格行，具体取决于您希望它出现的方式，例如

if ($status == 0) {
    echo '<tr class="unread">';
} else {
    echo '<tr class="read">';
}

然后有一个CSS定义，为每种情况应用不同的样式：

<style type="text/css">
tr.unread {
    background: lime;
}
tr.read {
    background: white;
}
</style>

Answer 2

此代码呈现多种样式。像这样的东西

<style type=\"text/css\">
tr:hover {
background: #cc00ff;
color: white;
}
tr {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
background: lime;
}
</style>

<style type=\"text/css\">
tr:hover {
background: #cc00ff;
color: white;
}
tr {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
background: white;
}
</style>

<style type=\"text/css\">
tr:hover {
background: #cc00ff;
color: white;
}
tr {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
background: lime;
}
</style>

...
...
...

只有最后一个才会生效。这不仅是非常低效的错误。将样式放置一次，然后在需要时使用tr标记中的类。像这样的东西

<style type=\"text/css\">
tr.white:hover {
    background: #cc00ff;
    color: white;
}
tr.white {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
    background: white;
}
tr.lime:hover {
    background: #cc00ff;
    color: lime;
}
tr.lime {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
    background: lime;
}
</style>

然后渲染适当的html

while ($row = mysql_fetch_row($result))
{
    $status = $row[4];//status table either a 0 or 1

    echo "<tr class=\"$colors[$status]\">";
    //rows for <table>
    echo "</tr>";
}

表格行颜色变化不按计划工作

2 个答案: