<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>ใช้ jQuery ในการเปลี่ยน Class ของ Table Rows เพื่อสลับสี</title> <style type="text/css"> #grid{ border:solid 1px #CCC; } #grid thead{ background:#F30; font:bold 13px Tahoma, Geneva, sans-serif; color:#fff; height:28px; } #grid tbody{ font:13px Tahoma, Geneva, sans-serif; color:#333; } #grid tr.even{ background:#F1F1F1; } #grid tr.odd{ background:#F9F9F9; } #grid tr.over{ background:#FCC; } </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#grid tbody tr:even").addClass("even");; $("#grid tbody tr:odd").addClass("odd");; $("#grid tbody tr") .mouseover(function() {$(this).addClass("over");}) .mouseout(function() {$(this).removeClass("over");}); }); </script> </head> <body> <table width="100%" border="0" cellspacing="1" cellpadding="0" id="grid"> <thead> <tr> <td align="center">Column 1</td> <td align="center">Column 2</td> <td align="center">Column 3</td> </tr> <thead> <tbody> <tr> <td align="center">Data 1</td> <td align="center">Data 2</td> <td align="center">Data 3</td> </tr> <tr> <td align="center">Data 1</td> <td align="center">Data 2</td> <td align="center">Data 3</td> </tr> <tr> <td align="center">Data 1</td> <td align="center">Data 2</td> <td align="center">Data 3</td> </tr> <tbody> </table> </body> </html>
Load balance : Server 00
