js兼容标准的表格变色效果

<!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=gb2312" /> <style type="text/css"> * { margin:0; padding:0; font-size:14px } body { text-align:center;} #btn { list-style:none inside; width:210px; margin:10px auto; clear:both; } #btn li { float:left; width:100px; line-height:20px } #btn li a{ display:block; text-decoration:none; color:#333333} #gray { background:#f5f5f5; cursor: pointer } #green { background:#D7ECDE; cursor:pointer } table { border-collapse:collapse; width:70%; margin:10px auto } td { line-height:100%; height:24px; line-height:24px; padding:0 4px } td a { text-decoration:none; color:#333; display:block; } #tab_gray td { border:1px solid #B9B9B9; background: #F2F2F2; } #tab_green td { border:1px solid #95CCA7; background:#EBF5EE; } #tab_gray td:hover, #tab_green td:hover { background:#fff; } </style> </head> <body> <ul id="btn"> <li id="gray"><a href="javascript:void()" onclick="gray()">gray</a></li> <li id="green"><a href="javascript:void()" onclick="green()">green</a></li> </ul> <table id="tab_gray"> <tr> <td><a href="#">Table</a></td> <td><a href="#">Table</a></td> <td><a href="#">Table</a></td> </tr> <tr> <td>hello</td> <td>hello</td> <td>hello</td> </tr> <tr> <td>hello</td> <td>hello</td> <td>hello</td> </tr> </table> <script language="javascript"> function green(){ document.getElementById("tab_gray").id="tab_green"; } function gray(){ document.getElementById("tab_green").id="tab_gray"; } </script> </body> </html>

　　推荐阅读

　　javascript 三组文字间隙滚动实例代码

三组文字间隙滚动 *{font-size:12px;} #scrollBox2{width:150px; height:64px; line-height:22px; overflow:hidden; background-color:#eee;} 国家汇率名称今日汇率 >>>详细阅读

本文标题：js兼容标准的表格变色效果

地址：http://www.17bianji.com/kaifa2/JS/29608.html

1/2 1