php - 将 PHP 备用表格行颜色添加到现有 HTML 表格

Question

我有一个已经用 PHP 编写的表，它回显从数据库调用的数据，如下所示：

<TABLE cellSpacing=1 cellPadding=2 align=center bgColor=#aaaaaa border=0 width="100%" class="logintbl">
             <TR>
              <TD bgColor=whitesmoke colSpan=0><B>Pages</B></td>
            </tr>
            <tr>
                <td>
                    <table align="center" cellSpacing=0 cellPadding=2 border="0" width="100%">
                        <tr>
                            <td align="center" valign="bottom">&nbsp;<font color="#4d71a1"><b>Page Name</b></font>&nbsp;</td>
                        </tr>
                        <?php while ($row = mssql_fetch_array($result)) { ?>
                        <tr bgcolor="#eeeeee">

                            <td align="center"><?php echo $row["PageURL"]; ?></td>
                            <td align="center">
                            <a href="PageUpdate.php?id=<?php echo $row["PageID"]; ?>"><img src="images/0013-pen.gif" width="16" height="16" alt="" border="0"></a>&nbsp;&nbsp;&nbsp;
                            </td>

                        </tr>
                <?php } ?>
                        <tr><td colspan="7">&nbsp;</td></tr>
                        <tr>
                            <td colspan="7" align="center">
                            </td>
                        </tr>

                    </table>
                </td>
            </tr>
        </table>

我一直在尝试使用一段 PHP 代码来改变行的颜色，并且在一些研究实现了这一点之后：

<tr bgcolor="<?php echo ($clrCounter++ % 2 == 0 ? '#000000' : '#ffffff'); ?>">

它似乎无法正常工作，所以我觉得我在某个地方出错了，我知道我可以实现更长的方法来实现它。我只是希望有一些简单的东西。我是否在浪费精力尝试以这种方式实现它？

我将其集成如下：

 <TABLE cellSpacing=1 cellPadding=2 align=center bgColor=#aaaaaa border=0 width="100%" class="logintbl">
            <TR>
              <td bgColor=whitesmoke colSpan=0><B>Pages</B></td>
            </tr>
            <tr>
                <td>
                    <table align="center" cellSpacing=0 cellPadding=2 border="0" width="100%">
                        <tr bgcolor="#3A7525">
                            <td align="center" valign="bottom">&nbsp;<font color="#4d71a1"><b>Page Name</b></font>&nbsp;</td>
                        </tr>
                        <?php while ($row = mssql_fetch_array($result)) { ?>

                        <tr bgcolor="<?php echo ($clrCounter++ % 2 == 0 ? '#C2C2C2' : '#ffffff'); ?>">

                            <td align="center"><?php echo $row["PageURL"]; ?></td>
                            <td align="center">
                            <a href="PageUpdate.php?id=<?php echo $row["PageID"]; ?>"><img src="images/0013-pen.gif" width="16" height="16" alt="" border="0"></a>&nbsp;&nbsp;&nbsp;
                            </td>

                        </tr>
                <?php } ?>
                        <tr>
                            <td colspan="7" align="center">
                            </td>
                        </tr>

                    </table>
                </td>
            </tr>
        </table>

它有点工作，但出于某种原因，第一个条目是蓝色的？当我指定白色和灰色时。

Answer 1

使用 CSS 选择器:nth-of-type( )。

通过为两者设置不同的样式，:nth-of-type(even)浏览:nth-of-type(odd)器会为您执行交替样式，因此您不必担心它。

请参阅W3Schools条目。

Answer 2

在循环从数据库返回的结果时，您可以使用以下内容：

<?php

// Define row colors
$color1 = "#FFFFFF";
$color2 = "#F4F9FF";

// Set row counter
$row_count = 0;

while ($row = mssql_fetch_array($result)) {
    $row_color = ($row_count % 2) ? $color1 : $color2;
?>
    <tr bgcolor="<?php echo $row_color; ?>">
        <td align="center"><?php echo $row["PageURL"]; ?></td>
        <td align="center">
            <a href="PageUpdate.php?id=<?php echo $row["PageID"]; ?>"><img src="images/0013-pen.gif" width="16" height="16" alt="" border="0"></a>&nbsp;&nbsp;&nbsp;
        </td>
    </tr>
<?php

    $row_count++;

}

?>

或者，您可以替换 bgcolor 标记并为每一行分配一个 CSS 类。

Answer 3

试试这个：

<tr <?php if($i%2){?>bgcolor="#eeeeee"<?php } else{ ?>bgcolor="red" <?php } $i++; ?>>

Answer 4

感谢 Bas van den Heuvel 使用 CSS 提供的出色答案。如果您像我一样遇到额外的行间距，并且想要删除它，请使用以下示例代码。这将使交替的颜色线更紧密地结合在一起。（我用的是浅灰色和白色）

p:nth-of-type(odd)
{
background:#e2e2e2;
margin: 0px;
padding: 0px;
}
p:nth-of-type(even)
{
background:#ffffff;
margin: 0px;
padding: 0px;
}