<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> <meta charset="UTF-8" /> <title>jQuery Hilight Table Rows </title> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div id="Result"> <?php $Hostname = "localhost"; $Hostuser = "root"; $Hostpass = ""; $Db_name = ""; $link = mysql_connect($Hostname, $Hostuser, $Hostpass) or die (mysql_error()); $sel_db = mysql_select_db($Db_name, $link); function Sex_val($val){ if($val == 1){ $Sex = "Male"; }else{ $Sex = "Female"; } return $Sex; } function Major_val($val){ if($val == 1){ $Major = "Computer1"; }elseif($val == 2){ $Major = "Computer2"; }else{ $Major = "Computer3"; } return $Major; } /* Sql Command */ $Sql = "SELECT * FROM student_data"; $Qr_Sql = mysql_query($Sql); $rows = mysql_num_rows($Qr_Sql); /* Check rows of table */ if($rows <= 0){ echo "Not found. !!!"; }else{ ?> <table align="center" width="800" border="1"> <tr> <th>Name</th> <th>Surename</th> <th>Sex</th> <th>Major</th> </tr> <?php while($fetch = mysql_fetch_array($Qr_Sql)){ $numbers++; if($numbers%2 == 0 ){$Col = "Col2";}else{$Col = "Col1";} ?> <tr class="<?=$Col?>"> <td ><?=$fetch["Name"];?></td> <td><?=$fetch["Surename"];?></td> <td><?=Sex_val($fetch["Sex"]);?></td> <td><?=Major_val($fetch["Major"]);?></td> <?php } } ?> </tr> </table> </div> <script type="text/javascript"> $(document).ready(function(){ //+ highlight row $('.Col1, .Col2').mouseover(function(){ $(this).toggleClass('highlight'); }); $('.Col1, .Col2').mouseout(function(){ $(this).toggleClass('highlight'); }); }); </script> </body> </html>
body{ font-family:Arial; font-size:12px; } th{height:30px; background-color:#D1DCEB;} .Col1{background-color:#CCC; height:20px;} .Col2{background-color:#FFF; height:20px;} .highlight{background:#FFFFCC !important;}
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
