【代码教程】jQuery制作的隔行变色表格html代码
2013-08-19 14:53:01 -0400
代码如下：
<!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制作的隔行变色</title> <style> *{padding:0; margin:0;} body{font-size:14px;} #tab{width:400px; margin:0 auto; border-bottom:1px solid #999; border-right:1px solid #999;} #tab td{padding:2px 0; border-left:1px solid #999; border-top:1px solid #999; text-align:center;} .red{background:#f00;} .green{background:#0c0;} .black{background:#000;} </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script> var backgroundColorClass="green"; $(document).ready(function(){ $("#tab").find("tr:even").addClass(backgroundColorClass); }); </script> </head> <body> <table id="tab" cellpadding="0" cellspacing="0"> <tbody> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> </tbody> </table> </body> </html>
效果如下：
jQuery制作的隔行变色
aaa
bbb
ccc
aaa
bbb
ccc
aaa
bbb
ccc
aaa
bbb
ccc
aaa
bbb
ccc
aaa
bbb
ccc
aaa
bbb
ccc
aaa
bbb
ccc
aaa
bbb
ccc
aaa
bbb
ccc
«Newer
Older»
Comment:
Name:
Back to home
Subscribe
|
Register
|
Login
|
N