黑马程序员技术交流社区

标题: JavaScript中表格操作问题 [打印本页]

---

作者: 黄树人    时间: 2012-9-7 20:10
标题: JavaScript中表格操作问题

1. <script type="text/javascript">
   
2. //记录原来的初始值
   
3. var name;
   
4. 
   
5. 
   
6. function tableLoad()
   
7. {
   
8.         //获取表格元素
   
9.         var tableNode = document.getElementsByTagName("table")[0];
   
10.         //alert(tableNode);
    
11.         //获取所有的行元素
    
12.         //var trNodes = tableNode.getElementsByTagName("tr");
    
13.         var trNodes = tableNode.rows;
    
14.         //alert(trNodes.length);
    
15.        
    
16.         for(var x=1; x<trNodes.length; x++)
    
17.         {
    
18.                 //隔行变色效果
    
19.                 if(x%2==1)
    
20.                 {
    
21.                         trNodes[x].className = "one";
    
22.                 }
    
23.                 else
    
24.                 {
    
25.                         trNodes[x].className = "two";
    
26.                 }
    
27.                
    
28.                 //注册鼠标移动事件
    
29.                 trNodes[x].onmousemove = function()
    
30.                 {
    
31.                         name = this.className;
    
32.                         this.className = "over";
    
33.                 }
    
34.                
    
35.                 trNodes[x].onmouseout = function()
    
36.                 {
    
37.                         this.className = name;
    
38.                 }
    
39.         }
    
40. }
    
41. </script>

复制代码

我想通过鼠标移动事件来使表格达到隔行变色的效果，
我先定义name来记录这一行的原本颜色，然后把但数行给颜色“one”，
偶数行给颜色“two”，然后调用鼠标移动事件使鼠标移动到该行上，颜色转换
我上面的代码已经实现了变色，只是当鼠标移开以后，颜色缺变不回来了
不知道代码哪里出了问题，希望大家帮忙看看

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2