Question

我想以<ul> <li>格式显示我的数据库记录。我使用免费模板来设计我的前端。我正在读这样的数据库数据

while ($row = mysql_fetch_assoc($result)) {
    $categoryname = $row['category_name'];
}

并且在循环内我必须显示这样的记录

<li class="odd"><a href="services.html">Processors</a></li>
         <li class="even"><a href="services.html">Motherboards</a></li>
        <li class="odd"><a href="1_service.html">Processors</a></li>
        <li class="even"><a href="2_services.html">Motherboards</a></li>
         <li class="odd"><a href="3_services.html">Desktops</a></li>
        <li class="even"><a href="4_services.html">Laptops & Notebooks</a></li>
         <li class="odd"><a href="5_services.html">Processors</a></li>
         <li class="even"><a href="6_services.html">Motherboards</a></li>
        </ul>

如何做到这一点。请建议

如果我想给每个像这样的喜欢单独的页面链接

<li class="odd"><a href="services.html">Processors</a></li>
         <li class="even"><a href="services.html">Motherboards</a></li>
        <li class="odd"><a href="services.html">Processors</a></li>
        <li class="even"><a href="services.html">Motherboards</a></li>
         <li class="odd"><a href="services.html">Desktops</a></li>
        <li class="even"><a href="services.html">Laptops & Notebooks</a></li>
         <li class="odd"><a href="services.html">Processors</a></li>
         <li class="even"><a href="services.html">Motherboards</a></li>
        </ul>

然后怎么做？

Answer 1

您需要观察迭代，以判断您是处于偶数还是奇数周期：

$output  = "";
$counter = -1;

while ( $row = mysql_fetch_assoc( $result ) ) {
  $class = $counter++ % 2 === 0 ? "even" : "odd" ;
  $href  = $row["category_url"];
  $text  = $row["category_name"];
  $output .= "<li class='{$class}'><a href='foo?id={$href}'>{$text}</a></li>";
}

echo "<ul>{$output}</ul>";

原生CSS解决方案

确定哪些元素是奇数，哪些是偶数是不一定需要用PHP完成的。实际上，它并不需要添加类名来为每个列表项设置样式。 CSS有一个花哨的选择器:nth-child(n)，可以为你处理：

li:nth-child(even) {
    background: #f1f1f1;
    color: #CCC;
}

演示：http://jsfiddle.net/rquXK/

这意味着您可以避免确定$class的值，并将该逻辑移到CSS上。请记住，一些旧版浏览器不支持该功能。

支持表：http://caniuse.com/#feat=css-sel3

Answer 2

$i = 0;
while ($row = mysql_fetch_assoc($result)) {
   echo '<li class="'.($i++ % 2 == 0 ? 'odd' : 'even').'">'.$row['category_name'].'</li>';
}

Answer 3

<?php

$index = 0;
while ($row = mysql_fetch_assoc($result)) {
    $className = ($index %2 == 0) ? "even" : "odd" ;
    $categoryName = $row['category_name'];
?>

<li class="<?php echo $className;?>"><a href="services.html"><?php echo $categoryName;?> </a></li>

<?php 
  $index++
}
?>

Answer 4

只需保留一个计数器，在循环中递增它，如果它是一个奇数设置类为奇数，如果甚至将类设置为偶数。所以根据@bsdnoobz回答：

$i = 0;
while ($row = mysql_fetch_assoc($result)) {
    $class = $i % 2 == 0 ? 'even' : 'odd';
    echo "<li class='$class'>".$row['category_name'].'</li>';
    $i++;
}

Answer 5

$parentid = 0; // assuming that 0 is the main category.

get_sub_cats($parentid);

function get_sub_cats($parentid) {
    $sql = "SELECT * FROM table_name WHERE parent_id = ".$parentid.""; 
    $run = mysql_query($sql);

    echo '<ul>';

    while ($rec = mysql_fetch_assoc($run)) { 
        echo '<li />'.$rec['study']; 
        get_sub_cats($rec['id']);
    }

    echo '</ul>';

}

希望它有效......

Answer 6

使用class属性来表示偶数行或奇数行/条目表示您正在使用CSS来设置那些样式。

根据您仍需要支持的浏览器，可能需要这样做。但是，通常它不再是：

警告：在撰写本文时（2003年2月），主流浏览器还不支持'n-child'选择器（2001年11月推出）

http://caniuse.com/#search=nth-child

CSS示例：

li:nth-child(even) {background: #CCC}
li:nth-child(odd) {background: #FFF}

请参阅CSS: Even And Odd Rules

以无序列表格式显示数据库记录

6 个答案:

原生CSS解决方案