为显示的每个 MYSQL 行添加不同的样式答案

【问题标题】：Add different styling to each MYSQL row displayed为显示的每个 MYSQL 行添加不同的样式
【发布时间】：2019-12-13 16:05:26
【问题描述】：

我需要为 mysql 显示的每一行添加不同的样式。我正在显示最后 4 行，从第一行开始，样式应该被称为第一、第二、第三、第四。

<?php
        $sql = "SELECT * FROM articles ORDER BY id DESC LIMIT 4";
        $result = $con->query($sql);

        if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
                echo '
                    <div class="ot-slider-layer first">
                        <a href="articles/'.$row['slug'].'">
                            <strong><i style="background-color: #ed2d00; color: #fff;">'.category_name_by_id($row['category']).'</i>'.$row['title'].'</strong>
                            <img src="images/articles/'.$row['image'].'" alt="'.$row['title'].'" />
                        </a>
                    </div>
                ';
            }
        } else {
            echo "There is no news";
        }
    ?>

【问题讨论】：

添加一个在您的while 循环中递增的计数器，并相应地设置您的class 或其他任何内容。或者，您可以将 (@row_number:=@row_number + 1) AS num 添加到您的 SELECT 语句中，并使用它来确定您的样式类/id/whatever。

标签： php mysql row

【解决方案1】：

这适用于这种情况：

<?php
        $sql = "SELECT * FROM articles ORDER BY id DESC LIMIT 4";
        $result = $con->query($sql);

        if ($result->num_rows > 0) {
            //array of class names for 4 different rows
            $array = array('first', 'second', 'third', 'fourth');
            //counter variable
            $i = 0;  
            while($row = $result->fetch_assoc()) {
                echo '
                    <div class="ot-slider-layer '.$array[$i].'">
                        <a href="articles/'.$row['slug'].'">
                            <strong><i style="background-color: #ed2d00; color: #fff;">'.category_name_by_id($row['category']).'</i>'.$row['title'].'</strong>
                            <img src="images/articles/'.$row['image'].'" alt="'.$row['title'].'" />
                        </a>
                    </div>
                ';
                //increment counter variable for each row loop
                ++$i;
            }
        } else {
            echo "There is no news";
        }
    ?>

【讨论】：

感谢您分享此内容，但在尝试后，它只显示每行的第一个数组值，而不显示其他数组值
好的，修好了。 $i = 0;应该在循环之外
您确定完全复制了吗？特别是“++$i;”在 while 循环的末尾部分 - 这就是使 $i 从 0 到 1 到 2 等的原因，以使数组键正确。我刚刚在我的环境中尝试了一个版本，它按预期打印出来了
我做到了，正如我上面提到的，当我移动 $i = 0; 时它起作用了在while循环之外

【解决方案2】：

您应该为此使用 CSS。看看:nth-child-selector。

【讨论】：

【解决方案3】：

这可以在 CSS 中轻松完成，无需服务器端计算。如果您希望每 4 行交替样式，或者只设置最后 4 行的样式，您的问题并不清楚。但都可以使用 CSS 来完成：

交替：使用:nth-child selector。

div.ot-slider-layer:nth-child(4n+1) { background: #00ffff50; }
div.ot-slider-layer:nth-child(4n+2) { background: #0000ff50; }
div.ot-slider-layer:nth-child(4n+3) { background: #00000050; }
div.ot-slider-layer:nth-child(4n+4) { background: #ff000050; }

<div class="container">
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">First</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Second</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Third</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Fourth</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Fifth</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Sixth</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Seventh</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Eighth</a>
    </div>
</div>

仅最后 4 个： 使用 nth-last-child selector

div.ot-slider-layer:nth-last-child(4) { background: #00ffff50; }
div.ot-slider-layer:nth-last-child(3) { background: #0000ff50; }
div.ot-slider-layer:nth-last-child(2) { background: #00000050; }
div.ot-slider-layer:nth-last-child(1) { background: #ff000050; }

<div class="container">
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">First</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Second</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Third</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Fourth</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Fifth</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Sixth</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Seventh</a>
    </div>
    <div class="ot-slider-layer">
        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Eighth</a>
    </div>
</div>

【讨论】：