0

I'm trying to display the first row in one color and the second row in another color but my code displays the result twice in both colors for example lets say I have 5 results my code will double the results by displaying 10 results. How can I fix this problem?

Here is the php code.

while ($row = mysqli_fetch_assoc($dbc)) {
    //first row
    echo '<h3 class="title"><a href="#" title="">' . $row['title'] .'</a></h3>';
    echo '<div class="summary"><a href="#" title="">' . substr($row['content'],0,255) . '</a></div>';

    //second row
    echo '<h3 class="title-2"><a href="#" title="">' . $row['title'] .'</a></h3>';
    echo '<div class="summary-2"><a href="#" title="">' . substr($row['content'],0,255) . '</a></div>';

}
3
  • 2
    delete completely the second row! you don't need it, it's a loop! Commented May 8, 2010 at 12:47
  • but I want to display the second row in a different color without doubling the results. Commented May 8, 2010 at 12:48
  • see my update just one line for doing the zebra effect! Commented May 8, 2010 at 13:11

8 Answers 8

4

You need to change the class on each row:

$count = 0;

while ($row = mysqli_fetch_assoc($dbc)) {

    if( $count % 2 == 0 ) { 
        $classMod = '';
    } else {
        $classMod = '-2';
    }

    //first row
    echo '<h3 class="title' . $classMod . '"><a href="#" title="">' . $row['title'] .'</a></h3>';
    echo '<div class="summary' . $classMod . '"><a href="#" title="">' . substr($row['content'],0,255) . '</a></div>';

    $count++;
}
Sign up to request clarification or add additional context in comments.

1 Comment

$count % 2 == 0 for the if ?
2

your code should be like this

CSS

.odd { background: #CCC }
.event { background: #666 }

PHP

   $c = true;
   while ($row = mysqli_fetch_assoc($dbc)) {
   $style =  (($c = !$c)?' odd':' even');     
   echo '<h3 class="title '.$style.'"><a href="#" title="">' . $row['title'] .'</a></h3>';
   echo '<div class="summary '.$style.'"><a href="#" title="">' .substr($row['content'],0,255) . '</a></div>';

}

1 Comment

but how do I display a second row in a different color?
1

Here's a solution with minimal repetition:

$count = 0;
while (($row = mysqli_fetch_assoc($dbc)) && ++$count) {
    printf(
         '<h3 class="title%1$s"><a href="#" title="">%2$s</a></h3>'
       . '<div class="summary%1$s"><a href="#" title="">%3$s</a></div>'
       , $count % 2 ? "" : "-2"
       , $row['title'] // might want to use htmlentities() here...
       , substr($row['content'], 0, 255) // and here...
    );
}

Comments

0
$i = 0;
while ($row = mysqli_fetch_assoc($dbc)) {
    $color =$i % 2;
    echo '<h3 class="title-' .$color . '"><a href="#" title="">' . $row['title'] .'</a></h3>';
    echo '<div class="summary"><a href="#" title="">' . substr($row['content'],0,255) . '</a></div>';
    $i++;
}

Comments

0

Your code just displays every result twice. Use a conditional (e.g. an integer or a boolean) to switch between rows (like: if true, then green; if false, then red).

For a boolean you could change the current value like so:

bool = !bool;

Comments

0

Couple of extra points:

  • You don't (normally) need so many classes. If you have <div class="stripe"> as your container, you can target the items with e.g. .stripe h3 in CSS.
  • If you target the odd and even items in CSS with .stripe h3, you can then overwrite just the odd items.
  • In a perfect world, you should keep presentation in the CSS. All browsers but IE7 and below support div:odd to target any odd child of a parent. This may require changing the structure of your HTML slightly. For IE7 and below, I'd add classes with JavaScript instead of PHP. When IE7 is no more then you can just remove the JS.

Comments

0

By the way, you could do this code too:

while ($row = mysqli_fetch_assoc($dbc)) {
    echo '<h3 class="title"><a href="#" title="">' . $row['title'] .'</a></h3>';
    echo '<div class="summary"><a href="#" title="">' . substr($row['content'],0,255) . '</a></div>';

    if($row = mysqli_fetch_assoc($dbc)){
        echo '<h3 class="title-2"><a href="#" title="">' . $row['title'] .'</a></h3>';
        echo '<div class="summary-2"><a href="#" title="">' . substr($row['content'],0,255) . '</a></div>';
    }
}

Comments

-1

IMO, there is no excuse for not delegating this kind of non-critical, presentation layer decoration to client side code.

Just use a library like jQuery and access the odd and even rows like so:

<script>
$(document).ready(function()
{

  //for your table rows
  $("tr:even").css("background-color", "#F4F4F0");
  $("tr:odd").css("background-color", "#EFF1F2");
});
</script>

You'll have us generating font tags next.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.