Question

I want to display my database records in <ul> <li> format. I have using a free template to design my front end. I am reading database data like this

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

and within the loop i have to display records like this

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

How to do like this. Please suggest

if i want to give seperate page link to each lik like this

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

then how to do it?

Answer 1

You’ll need to watch the iteration to tell if you’re on an even or odd cycle:

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

Native CSS Solution

Determining which elements are odd, and which are even is something that doesn’t necessarily need to be done with PHP. In fact, it doesn’t really require adding a classname to style each list item. CSS has a fancy selector, :nth-child(n), that can handle this for you:

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

Demo: http://jsfiddle.net/rquXK/

This means you can avoid determining the value of $class, and move that logic instead to your CSS. Just keep in mind that some older browsers won’t support the feature.

Support Tables: http://caniuse.com/#feat=css-sel3