Jump to content

Alternating Color


teknospr

Recommended Posts

Good day:

 

I'm trying to get the following output to alternate colors of background (white and gray or other colors). Any help will be appreciated.

 

(This is the entire script so far.)

 

 

<html>

<body>

<?php

  $connection = mysql_connect("localhost",

        "username",

        "password");

 

    mysql_select_db("articles", $connection);

$query="SELECT * FROM articles WHERE id=1";

$result=mysql_query($query);

 

$num=mysql_numrows($result);

 

mysql_close();

?>

<table border="1" cellspacing="2" cellpadding="2">

<tr>

<th><font face="Arial, Helvetica, sans-serif">Article</font></th>

<th><font face="Arial, Helvetica, sans-serif">Year</font></th>

<th><font face="Arial, Helvetica, sans-serif">Description</font></th>

<th><font face="Arial, Helvetica, sans-serif">Location</font></th>

 

</tr>

 

<?php

$i=0;

while ($i < $num) {

 

$f1=mysql_result($result,$i,"article");

$f2=mysql_result($result,$i,"year");

$f3=mysql_result($result,$i,"description");

$f4=mysql_result($result,$i,"location");

$f5=mysql_result($result,$i,"link")

?>

 

<tr>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $f2; ?></font></td>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $f3; ?></font></td>

<td ><font face="Arial, Helvetica, sans-serif"><?php echo  "<a href=\"$f5\" target=\"_blank\">$f4</a>"; ?></font></td>

</tr>

<tr>

</tr>

 

<?php

$i++;

}

?>

</body>

</html>

 

Link to comment
https://forums.phpfreaks.com/topic/229577-alternating-color/
Share on other sites

You could do something like

 

<?php
$i=0;
while ($i < $num) {
$backgroundclass = (($i % 2) == 0) ? 'gray' : 'white';
$f1=mysql_result($result,$i,"article");
$f2=mysql_result($result,$i,"year");
$f3=mysql_result($result,$i,"description");
$f4=mysql_result($result,$i,"location");
$f5=mysql_result($result,$i,"link")
?>

<tr class='<?php echo $backgroundclass ?>'>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f2; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f3; ?></font></td>
<td ><font face="Arial, Helvetica, sans-serif"><?php echo  "<a href=\"$f5\" target=\"_blank\">$f4</a>"; ?></font></td>
</tr>
<tr>
</tr>

 

Then just create css classes called gray and white and have them set the color appropriately.

 

 

Link to comment
https://forums.phpfreaks.com/topic/229577-alternating-color/#findComment-1182805
Share on other sites

Instead of defining a CSS class, you can use in-line styling:

<tr style='backgroundcolor:<?php echo $backgroundclass ?>'>

 

But CSS doesn't have to be hard. In this case, put the following in the "<head>" area of your html:

<style>
    .gray {
         backgroundcolor: gray;
    }

    .white {
        backgroundcolor: white;
    }
</style>

 

When you say "No luck with css", how much did you look?

 

Ken

Link to comment
https://forums.phpfreaks.com/topic/229577-alternating-color/#findComment-1182821
Share on other sites

Looked up about 15 examples. Changed the code and created the css file but it was not changing the background, which I'm sure has to do with a mistake or mistakes I made. Even though I have html and php minor experience, I honestly have never worked with css. I am pretty new at this, but the project is worth the time. I'm gonna try what you just sent right now.

Link to comment
https://forums.phpfreaks.com/topic/229577-alternating-color/#findComment-1182826
Share on other sites

Looked up about 15 examples. Changed the code and created the css file but it was not changing the background, which I'm sure has to do with a mistake or mistakes I made. Even though I have html and php minor experience, I honestly have never worked with css. I am pretty new at this, but the project is worth the time. I'm gonna try what you just sent right now.

Post the css code you have so far and we will help you fine tune it.
Link to comment
https://forums.phpfreaks.com/topic/229577-alternating-color/#findComment-1182829
Share on other sites

This is the css example I tried to apply. I can rewrite it again in the code I have, since it didnt work and I just moved on to try something else that didnt work for me, another example that had php and used variables and adding up a number, but the odd and even numbers routine is beyond what I know right now. Anyway, this is the example I tried to apply:

 

<html>

<head>

<title>Table example</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

 

<body>

<table>

<tr>

<th>Toon</th>

</tr>

 

<?php

$toons = array("Bugs Bunny", "Daffy Duck", "Tom Cat", "Jerry Mouse");

$rowclass = 0;

foreach ($toons as $toon) {

?>

    <tr class="row<?= $rowclass ?>">

    <td><?= $toon ?></td>

    </tr>

<?php

    $rowclass = 1 - $rowclass;

} ?>

 

Link to comment
https://forums.phpfreaks.com/topic/229577-alternating-color/#findComment-1182839
Share on other sites

<html>
<head>
<title>Page Title</title>

<style>
.gray { backgroundcolor: gray; }
.white { backgroundcolor: white; }
</style>

</head>
<body>
<?php
  $connection = mysql_connect("localhost",
        "username",
        "password");

    mysql_select_db("articles", $connection);
$query="SELECT * FROM articles WHERE id=1";
$result=mysql_query($query);

$num=mysql_numrows($result);

mysql_close();
?>
<table border="1" cellspacing="2" cellpadding="2">
<tr>
<th><font face="Arial, Helvetica, sans-serif">Article</font></th>
<th><font face="Arial, Helvetica, sans-serif">Year</font></th>
<th><font face="Arial, Helvetica, sans-serif">Description</font></th>
<th><font face="Arial, Helvetica, sans-serif">Location</font></th>

</tr>

<?php
$i=0;
while ($i < $num) {
$backgroundclass = (($i % 2) == 0) ? 'gray' : 'white';
$f1=mysql_result($result,$i,"article");
$f2=mysql_result($result,$i,"year");
$f3=mysql_result($result,$i,"description");
$f4=mysql_result($result,$i,"location");
$f5=mysql_result($result,$i,"link")
?>

<tr class='<?php echo $backgroundclass ?>'>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f2; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f3; ?></font></td>
<td ><font face="Arial, Helvetica, sans-serif"><?php echo  "<a href=\"$f5\" target=\"_blank\">$f4</a>"; ?></font></td>
</tr>
<tr>
</tr>

<?php
$i++;
}
?>
</body>
</html>

Link to comment
https://forums.phpfreaks.com/topic/229577-alternating-color/#findComment-1182856
Share on other sites

I did use it actually. Just revised it right now to make sure I wrote it correctly but its not working. Dont know if it has to do with the php version or something else.

 

Here is the code exactly as I have it:

 

<html>

<head>

<title>Articles</title>

 

<style>

.gray { backgroundcolor: gray; }

.white { backgroundcolor: white; }

</style>

 

</head>

<body>

<?php

  $connection = mysql_connect("localhost",

        "username",

        "password");

 

    mysql_select_db("articles", $connection);

$query="SELECT * FROM articles WHERE id=1";

$result=mysql_query($query);

 

$num=mysql_numrows($result);

 

mysql_close();

?>

<table border="1" cellspacing="2" cellpadding="2">

<tr>

<th><font face="Arial, Helvetica, sans-serif">Article</font></th>

<th><font face="Arial, Helvetica, sans-serif">Year</font></th>

<th><font face="Arial, Helvetica, sans-serif">Description</font></th>

<th><font face="Arial, Helvetica, sans-serif">Location</font></th>

 

</tr>

 

<?php

$i=0;

while ($i < $num) {

$backgroundclass = (($i % 2) == 0) ? 'gray' : 'white';

$f1=mysql_result($result,$i,"article");

$f2=mysql_result($result,$i,"year");

$f3=mysql_result($result,$i,"description");

$f4=mysql_result($result,$i,"location");

$f5=mysql_result($result,$i,"link")

?>

 

<tr class='<?php echo $backgroundclass ?>'>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $f2; ?></font></td>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $f3; ?></font></td>

<td ><font face="Arial, Helvetica, sans-serif"><?php echo  "<a href=\"$f5\" target=\"_blank\">$f4</a>"; ?></font></td>

</tr>

<tr>

</tr>

 

<?php

$i++;

}

?>

</body>

</html>

Link to comment
https://forums.phpfreaks.com/topic/229577-alternating-color/#findComment-1182861
Share on other sites

I checked the code, the query works and the table is populated, but the colof of the table is plain white, its not alternating. Any help will be appreciated.

 

This is the exact code:

 

<html>

<head>

<title>Articles</title>

 

<style>

.gray { backgroundcolor: gray; }

.white { backgroundcolor: white; }

</style>

 

</head>

<body>

<?php

  $connection = mysql_connect("localhost",

        "username",

        "password");

 

    mysql_select_db("articles", $connection);

$query="SELECT * FROM articles WHERE id=1";

$result=mysql_query($query);

 

$num=mysql_numrows($result);

 

mysql_close();

?>

<table border="1" cellspacing="2" cellpadding="2">

<tr>

<th><font face="Arial, Helvetica, sans-serif">Article</font></th>

<th><font face="Arial, Helvetica, sans-serif">Year</font></th>

<th><font face="Arial, Helvetica, sans-serif">Description</font></th>

<th><font face="Arial, Helvetica, sans-serif">Location</font></th>

 

</tr>

 

<?php

$i=0;

while ($i < $num) {

$backgroundclass = (($i % 2) == 0) ? 'gray' : 'white';

$f1=mysql_result($result,$i,"article");

$f2=mysql_result($result,$i,"year");

$f3=mysql_result($result,$i,"description");

$f4=mysql_result($result,$i,"location");

$f5=mysql_result($result,$i,"link")

?>

 

<tr class='<?php echo $backgroundclass ?>'>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $f2; ?></font></td>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $f3; ?></font></td>

<td ><font face="Arial, Helvetica, sans-serif"><?php echo  "<a href=\"$f5\" target=\"_blank\">$f4</a>"; ?></font></td>

</tr>

<tr>

</tr>

 

<?php

$i++;

}

?>

</body>

</html>

Link to comment
https://forums.phpfreaks.com/topic/229577-alternating-color/#findComment-1182901
Share on other sites

Replace

<style>
.gray { backgroundcolor: gray; }
.white { backgroundcolor: white; }
</style>

with

<style>
.gray { background-color: gray; }
.white { background-color: white; }
</style>

 

While you're at it, you might want to use this modified code:

<html>
<head>
	<title>Articles</title>

	<style>
		.gray { background-color: gray; }
		.white { background-color: white; }
		.fontface {
			font-family: Arial, Helvetica, sans-serif;
		}
	</style>

</head>
<body>
	<?php
	$connection = mysql_connect("localhost",
	"username",
	"password");

	mysql_select_db("articles", $connection);
	$query="SELECT article, year, description, link, location FROM articles WHERE id=1";
	$result=mysql_query($query);
	?>
<table border="1" cellspacing="2" cellpadding="2">
	<tr>
		<th class='fontface'>Article</th>
		<th class='fontface'>Year</th>
		<th class='fontface'>Description</th>
		<th class='fontface'>Location</th>
	</tr>
		<?php
		$backgroundclass = 'white';
		while ($row = mysql_fetch_assoc($result)) {
			$backgroundclass = ($backgroundclass == 'white') ? 'gray' : 'white';
			?>
	<tr class='<?php echo $backgroundclass ?>'>
		<td class='fontface'><?php echo $row['article']; ?></td>
		<td class='fontface'><?php echo $row['year']; ?></td>
		<td class='fontface'><?php echo $row['description']; ?></td>
		<td class='fontface'><?php echo  "<a href='{$row['link']}' target='_blank'>{$row['location']}</a>"; ?></td>
	</tr>
	<?php
		}
	?>
</body>
</html>

 

Ken

Link to comment
https://forums.phpfreaks.com/topic/229577-alternating-color/#findComment-1182912
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.