CODEWITHSUNDEEP
phpmysqlhtmlcss
user1537415
user1537415

Reputation:

Every second row printed from mysql should be colored

I have a contact form at my wordpress site, which it's data to mysql and also sends it with mail. I'm currently working on a simple wep app that simply reads the data from the database and prints it. To make it easier to read on mobile, I want that every second row printed from the database would be gray and every second white. I tried this but failed miserably, as you can see from the code. So I want it to look this: http://i49.tinypic.com/20fbvdi.png And here's the code:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Yhteydenottopyynnöt</title>
<style>
body{width:100%;}
.anotherrow{background-color:#f1f;}
</style>
</head>

<body>
<?php
$con = mysql_connect("localhost","user","pass");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("database", $con);

$result = mysql_query("SELECT * FROM wp_contactform");

echo "<table border='1'>
<tr>
<th style='width:10%;'>ID</th>
<th style='width:10%;' class='anotherrow'>Nimi</th>
<th style='width:10%;'>Puhelin</th>
<th style='width:10%;' class='anotherrow'>Sposti</th>
<th style='width:40%;'>Viesti</th>
<th style='width:10%;' class='anotherrow'>P&auml;iv&auml;</th>
<th style='10%;'>IP</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td style='width:10%;'>" . $row['ID'] . "</td>";
  echo "<td style='width:10%;' class='anotherrow'>" . $row['Nimi'] . "</td>";
  echo "<td style='width:10%;'>" . $row['Puhelin'] . "</td>";
  echo "<td style='width:10%;' class='anotherrow'><a href='mailto:" . $row['Email'] . "'>" . $row['Email'] . "</a></td>";
  echo "<td style='width:40%;'>" . $row['Viesti'] . "</td>";
  echo "<td style='width:10%;' class='anotherrow'>" . $row['Day'] . "</td>";
  echo "<td style='width:10%;'>" . $row['IP'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysql_close($con);
?>
</body>
</html>

Please don't get nightmares from the code, it's valid enough for me, and I'm the only one using the web app :)

Upvotes: 2

Views: 5102

Answers (4)

Lukazoid
Lukazoid

Reputation: 19416

Why not take the more modern approach and use a CSS3 selector? 

tr:nth-child(even) { background: #f1f; }

See here and here for the compatibility statuses.

Upvotes: 10

PoulsQ
PoulsQ

Reputation: 2016

try this ;

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Yhteydenottopyynnöt</title>
<style>
body{width:100%;}
.anotherrow{background-color:#f1f;}
</style>
</head>

<body>
<?php
$con = mysql_connect("localhost","user","pass");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("database", $con);

$result = mysql_query("SELECT * FROM wp_contactform");

echo "<table border='1'>
<tr>
<th style='width:10%;'>ID</th>
<th style='width:10%;'>Nimi</th>
<th style='width:10%;'>Puhelin</th>
<th style='width:10%;'>Sposti</th>
<th style='width:40%;'>Viesti</th>
<th style='width:10%;'>P&auml;iv&auml;</th>
<th style='10%;'>IP</th>
</tr>";

$count = 0;
while($row = mysql_fetch_array($result))
  {
  echo "<tr".((($count%2) == 0)?"":" class='anotherrow'").">";
  echo "<td style='width:10%;'>" . $row['ID'] . "</td>";
  echo "<td style='width:10%;' class='anotherrow'>" . $row['Nimi'] . "</td>";
  echo "<td style='width:10%;'>" . $row['Puhelin'] . "</td>";
  echo "<td style='width:10%;' class='anotherrow'><a href='mailto:" . $row['Email'] . "'>" . $row['Email'] . "</a></td>";
  echo "<td style='width:40%;'>" . $row['Viesti'] . "</td>";
  echo "<td style='width:10%;' class='anotherrow'>" . $row['Day'] . "</td>";
  echo "<td style='width:10%;'>" . $row['IP'] . "</td>";
  echo "</tr>";
$count++;
  }
echo "</table>";

mysql_close($con);
?>
</body>
</html>

Upvotes: 2

okay_google
okay_google

Reputation: 349

A very simple solution to this would be to make 2 simple CSS classes for Odd and Even Values. and define separate background colours in each of them. Then use the following piece of code to get your work done:

$j=0;
if(!($j%2)) {
            $cssClass = 'odd';
         } else {
            $cssClass = 'even';
         }
         $j++;

<tr class=<?php echo $cssClass; ?> > Data </tr>

Sort of like this.

Upvotes: 0

Tchoupi
Tchoupi

Reputation: 14681

Create an iteration counter before your while.

$i = 0;
while($row = mysql_fetch_array($result))

Then if $i is even, apply one color, if it's odd, apply the over one.

if ($i % 2 == 0) {
  echo "<tr class='firstColor'>";
} else {
  echo "<tr class='secondColor'>";
}

Iterator your variable before the while ends. $i++

Upvotes: 5

Related Questions