1

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

それならどうやってそれをするの？

4

6 に答える 6

3

反復を監視して、偶数サイクルか奇数サイクルかを判断する必要があります。

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

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

于 2012-05-30T05:58:54.313 に答える
0

カウンターを保持し、ループ内でインクリメントします。奇数の場合はクラスを奇数に設定し、偶数の場合はクラスを偶数に設定します。したがって、@ bsdnoobzの回答に基づいて：

$i = 0;
while ($row = mysql_fetch_assoc($result)) {
    $class = $i % 2 == 0 ? 'even' : 'odd';
    echo "<li class='$class'>".$row['category_name'].'</li>';
    $i++;
}
于 2012-05-30T05:59:31.597 に答える
0 
$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>';

}

それがうまくいくことを願っています...

于 2012-05-30T06:01:58.377 に答える
0 
$i = 0;
while ($row = mysql_fetch_assoc($result)) {
   echo '<li class="'.($i++ % 2 == 0 ? 'odd' : 'even').'">'.$row['category_name'].'</li>';
}
于 2012-05-30T05:57:27.873 に答える
0 
<?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++
}
?>
于 2012-05-30T05:59:25.747 に答える
0

Using the class attribute to signal even or odd rows/entries suggests that you're making use of CSS to style those.

Depending on which browser you still need to support, this might be necessary. However, normally it is not any longer:

Warning: at the time of writing (February 2003), the major browsers don't yet support the 'nth-child' selector (introduced in November 2001)

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

CSS Example:

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

See CSS: Even And Odd Rules

于 2012-05-30T07:51:00.067 に答える