- <!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" />
- <title>无标题文档</title>
- <style type="text/css">
- table, table td, table th{
- border:#0033CC 1px solid;
- }
- table{
- width:60%;
- }
- table th{
- background-color:#FFFF00;
- }
- .one{
- background-color:#99FF00;
- }
- .two{
- background-color:#FFFFCC;
- }
- .over{
- background-color:#FF6633;
- }
- </style>
- <script type="text/javascript">
- function sortTab()
- {
- var tabNode = document.getElementsByTagName("table")[0];
- var trs = tabNode.rows;
- for(var i=0; i<trs.length; i++)
- {
- if(i%2 == 1)
- {
- trs[i].className="one";
- }
- else
- {
- trs[i].className="two";
- }
- /*用这里的代码可以完成鼠标移动突出显示效果
- trs[i].onmouseover=function()
- {
- this.className = "over";
- }
- */
- trs[i].onmouseover = mouseOver(this);//用这句代码为什么没有效果?不用匿名应该怎么做呢?
- }
- }
- function mouseOver(trNode)
- {
- trNode.className = "over";
- }
- window.onload = function()
- {
- sortTab();
- }
- </script>
- </head>
- <body>
- <table>
- <tr>
- <th>姓名</th>
- <th><a href="javascript:void(0)" onclick="sortTab()">年龄</a></th>
- <th>地址</th>
- </tr>
- <tr>
- <td>张三</td>
- <td>27</td>
- <td>北京</td>
- </tr>
- <tr>
- <td>李四</td>
- <td>26</td>
- <td>长沙</td>
- </tr>
- <tr>
- <td>王五</td>
- <td>32</td>
- <td>加州</td>
- </tr>
- <tr>
- <td>赵六</td>
- <td>28</td>
- <td>首尔</td>
- </tr>
- <tr>
- <td>孙七</td>
- <td>8</td>
- <td>天津</td>
- </tr>
- </table>
- </body>
- </html>
复制代码 |