You may have seen different colors in mysql alternative rows in table. This tutorial I will display you the alternative colors in mysql rows and mouse over color change in table rows.Alternative color you can get using php but for mouse over effect you need to use java scripts.Create following examples and see what is happening with those codes.
| First Name | Last Name | Age |
|---|---|---|
| Scarlett | Johansson | 25 |
| Clooney | Anderson | 25 |
| Kate | Hudson | 35 |
| Scarlett | Clooney | 25 |
| Kate | Eva | 34 |
For this tutorial I have used table "biodata"
| <html> <head> <title>table row colors</title> <script type="text/javascript"> function hiLiteRows(){ var x = document.getElementsByTagName('tr'); for (var i=0;i<x.length;i++) { x[i].onmouseover = function () {this.origColor=this.style.backgroundColor; this.style.backgroundColor='#FFFFFF'; } x[i].onmouseout = function () {this.style.backgroundColor=this.origColor;} } } window.onload=hiLiteRows; </script> </head> <body> <?php $dbHost = 'localhost'; $dbUser = 'root'; $dbPass = ''; $dbName = 'my_database'; $dbConn = mysql_connect ($dbHost,$dbUser, $dbPass) or die ('MySQL connect failed. ' . mysql_error()); mysql_select_db($dbName) or die('Cannot select database. ' . mysql_error()); ?> <html> <head> <title>Display</title> </head> <table align="center" bgcolor="#ffffff"> <tr bgcolor="#bfbd93"> <th> First Name</th> <th>Last Name </th> <th> Age </th> </tr> <?php $color1 = "#f6f0e0"; $color2 = "#bfbd93"; $query = "SELECT * FROM biodata"; $result = mysql_query($query); while ($row = mysql_fetch_assoc($result)){ $row_color = ($row_count % 2)? $color1 : $color2; $row_count++; ?> <tr bgcolor="<?php echo $row_color;?>"> <td><?php echo $row["FirstName"];?></td> <td><?php echo $row["LastName"];?></td> <td><?php echo $row["Age"];?></td> </tr> <?php }?> </table> </body> </html> |
No comments:
Post a Comment