Question

我无法为从数据库中使用php生成的表设置一些css代码。我希望每个偶数行都有不同的背景颜色，所以我尝试使用nth-child（偶数），但它似乎并没有因某种原因而起作用。这是我的代码：
style.css中：

#usertable {
    border-collapse: collapse;
    font-family: "Trebuchet MS", Arial;
}
#usertable td, #usertable th {
    border: 1px solid black;
    background-color: rgb(228,227,227);
    padding: 8px;
}
#usertable tr:nth-child(odd){background-color: rgb(115,115,115);}

admin.php：

<table id="usertable">
    <tr>
        <th> Id: </th>
        <th> Username: </th>
        <th> Rights: </th>
    </tr>
    <?php
        $userquery = "SELECT id, username, strength FROM users";
        $result = $conn->query($userquery) or die($conn->error);
        while ($row = $result->fetch_assoc()) { ?>
            <tr>
                <td> <?php echo $row['id']; ?> </td>
                <td> <?php echo $row['username']; ?> </td>
                    <td>
                    <form method="post" action="">
                        <input type="number" min="0" max="255" name="newrights" value=" <?php echo $row['strength']; ?> ">
                        <input type="text" name="idnumber" hidden="true" value=" <?php echo $row['id']; ?> ">
                        <input type="text" name="usertochange" hidden="true" value=" <?php echo $row['username']; ?> ">
                        <input type="submit" value="Update">
                    </form>
                </td>
            </tr>
            <?php
        }
    ?>
</table>

Answer 1

您的代码存在一些标记错误

<table id="usertable">
<tr> <!--Add this-->
<th> Id: </th>
<th> Username: </th>
<th> Rights: </th>
</tr> <!--Add this-->
<?php
    $userquery = "SELECT id, username, strength FROM users";
    $result = $conn->query($userquery) or die($conn->error);
    while ($row = $result->fetch_assoc()) {
        echo "<tr><td>" . $row['id'] . "</td><td>" . $row['username'] . "</td><td>";
        echo "<form method=\"post\" action=\"\">
                <input type=\"number\" min=\"0\" max=\"255\" name=\"newrights\" value=\"" . $row['strength'] . "\">
                <input type=\"text\" name=\"idnumber\" hidden=\"true\" value=\"" . $row['id'] . "\">
                <input type=\"text\" name=\"usertochange\" hidden=\"true\" value=\"" . $row['username'] . "\">
                <input type=\"submit\" value=\"Update\">
            </form></td></tr>";
    }
?>

看起来你已经使用了许多内容，所以我建议你检查浏览器上的表格标记

已更新：添加

#usertable td:nth-child(odd) { background-color: #efefef;}

不要使用tr，因为你已经为td和最初的

提供了背景颜色

Answer 2

为什么不在每个备用表行中起诉一些CSS类？

前：

<强> HTML

<tr class="bg-red">
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
</tr>

<tr class="bg-blue">
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
</tr>

<强> CSS

<style type="text/css">
    .bg-blue{
        background-color: blue;
    }

    .bg-red{
        background-color: red;
    }
</style>

我认为这会简化您的代码和让它易于阅读。

动态数据示例

<?php
    $users[] = array('fname'=>'Jill', 'lname'=>'Smith', 'age'=>50);
    $users[] = array('fname'=>'Eve', 'lname'=>'Jackson', 'age'=>94);

    $rowColClass = 'bg-blue';
    foreach ($users as $key => $value)
    {
        echo "<tr class='$rowColClass'>";
            echo "<td>$value[fname]</td>";
            echo "<td>$value[lname]</td>";
            echo "<td>$value[age]</td>";
        echo "</tr>";

        if($rowColClass == 'bg-blue')
            $rowColClass = 'bg-red';
        else
            $rowColClass = 'bg-blue';
    }
?>

如何将nth-child应用于从数据库生成的表

2 个答案: