We help IT Professionals succeed at work.

New podcast episode! Our very own Community Manager, Rob Jurd, gives his insight on the value of an online community. Listen Now!

x

Table Rows - Alternating Background Color

fcruz5
fcruz5 asked
on
501 Views
Last Modified: 2013-12-13
Hi,

I am trying to get my table rows to display alternating background colors. But it is not displaying the alternating background color. How can I make this work correctly?

<?php

echo "<table cellpadding=\'2\' cellspacing=\'0\'>";

echo "<tr>";
echo "<td class=\"th\" >col1</td>";
echo "<td class=\"th\" >col2</td>";
echo "<td class=\"th\" >col3</td>";

if($result && mysql_num_rows($result) > 0)
{    for ($i = 0; $i < mysql_num_rows($result); $i++) {
    $resultArray[$i] = mysql_fetch_array($result);
}

foreach ($resultArray as $val) {
   echo ('<tr>');//first row
   if (($rowcount%2) == 0) {
        $css_class = "\"row\"";
    } else {
        $css_class = "\"alt\"";
    }

      echo ('<td class=' . $css_class . ' align=default >'.$val[1].'</td>');
      echo ('<td class=' . $css_class . ' align=default >'.$val[2].'</td>');
      echo ('<td class=' . $css_class . ' align=default >'.$val[3].'</td>');
    echo ('</tr>');
}

    echo ('<tr>');//second row
      echo ('<td class=' . $css_class . ' align=default >'.$resultArray[0][4].'</td>');
      echo ('<td class=' . $css_class . ' align=default >'.$resultArray[0][5].'</td>');
      echo ('<td class=' . $css_class . ' align=default >'.$resultArray[0][6].'</td>');
    echo ('</tr>');


} // end if results
echo ('</table>');

?>

Comment
Watch Question

CERTIFIED EXPERT

Commented:
example of what I use

// Define your colors for the alternating rows

$color1 = "#ECECEC";
$color2 = "#ffffff";
$datarow_count = 0;

     while ($datarow=mysql_fetch_assoc($query)) {
             $datarow_color = ($datarow_count % 2) ? $color1 : $color2;

Author

Commented:
Hi,

I couldn't get it to work. How would I use in the code posted above?
CERTIFIED EXPERT
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
Hi,

I tried it, but it didn't work. This is the css that I have for it if that helps.

.row { background-color: #eee; color: #000;
       font-family: Arial;
       font-size: 6pt;border-top:.05em solid #c4c4c4;
       border-right:.05em solid #c4c4c4;
}
.alt  { background-color: #fff; color: #000;
       font-family: Arial;
       font-size: 6pt;border-top:.05em solid #c4c4c4;
       border-right:.05em solid #c4c4c4;
}

CERTIFIED EXPERT

Commented:
Well do you get an error message or something? What is happening when you run the script?

As it is now you don't have a query in the script so obviously you will not get anything result to display.

Author

Commented:
I don't get an error message or anything when I run the script and it does display the results. The mysql query that I have is below:

SELECT view.division, view.members, view.quota, view.sep, view.jobs, view.location, sum(orders.amount)
FROM view, orders
WHERE view.division = orders.division GROUP BY view.division
CERTIFIED EXPERT

Commented:
Try removing the backgroud color from your css it's probably overwriting the code

Author

Commented:
Hi,

I removed the background color from my CSS and it still won't show the alternate colors.

I changed it using $cellvalue and it works. But I can't have it that way since my data doesn't display correctly. I need to use the above code posted above. Would it have to do with the new code having $val and $resultArray? :

<?php

echo "<table cellpadding=\'2\' cellspacing=\'0\'>";

echo "<tr>";
echo "<td class=\"th\" >col1</td>";
echo "<td class=\"th\" >col2</td>";
echo "<td class=\"th\" >col3</td>";

if($result && mysql_num_rows($result) > 0)
{    for ($i = 0; $i < mysql_num_rows($result); $i++) {
    $resultArray[$i] = mysql_fetch_array($result);

$color1 = "#ECECEC";
$color2 = "#ffffff";

}

foreach ($resultArray as $val) {
 $datarow_color = ($datarow_count % 2) ? $color1 : $color2;

echo ('<tr bgcolor='. $datarow_color .'>');//first row
   if (($rowcount%2) == 0) {
        $css_class = "\"row\"";
    } else {
        $css_class = "\"alt\"";
    }

echo "<td class=" . $css_class . "   align=Default >" . $cellvalue . "</td>";
    $cellvalue = "" . $row[0] . "";
    if ($cellvalue == "") {
        $cellvalue = "&nbsp;";
    }

echo "<td class=" . $css_class . "   align=Default >" . $cellvalue . "</td>";
    $cellvalue = "" . $row[1] . "";
    if ($cellvalue == "") {
        $cellvalue = "&nbsp;";
    }

echo ('</tr>');
}

} // end if results
echo ('</table>');

?>
CERTIFIED EXPERT
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
I changed it to:

$color1 = "#ECECEC";
$color2 = "#ffffff";
$datarow_count = 0;

But, it still isn't working. I noticed that with the css is displays the font, font size, borders correctly. Also, for the results that have no data; it won't display the border or anything like when there is data. This is strange. I will keep overlooking at the code, maybe there is something else that I am doing wrong.

Author

Commented:
I put the background color back in the css, but it displays all the rows one color. Looks like its works, but the rows are not alternating.
CERTIFIED EXPERT
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
Thanks, that was the problem
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.