table row color change not working as planned

I have a database and a table named status. A status of 0 means unread and a status of 1 means read If the status is 0 the individual row is supposed to turn lime. If it is 1 it's white.

$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>";

the $status variable is set here:

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

However when the table row background is set it changes for all the table rows instead of just the row 开发者_开发百科with a status of 0.

How can I make the individual rows change color depending on their status value?

You misunderstand how browsers apply CSS. They essentially have a "global state" of CSS rules. As you specify more rules (e.g. via <style> or style=), they merely update this "global state", which is then applied to every element in your page.

To achieve what you want, simply apply a class to the table row, depending on how you want it to appear, e.g.

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

Then have a single CSS definition that applies differing style for each case:

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

This code is rendering multiple styles. Something like this

<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>

...
...
...

Only the last one would take effect. This is not only wrong terribly inefficient also. Put the styles just once and then use the class in the tr tag when you need. Something like this

<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>

then render the appropriate 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>";
}