您的位置：首页 > Web前端 > JavaScript

用HTML+JavaScript实现表格的分行变色加鼠标移动变高亮

2015-04-14 00:22 826 查看

用HTML+JavaScript实现表格的分行变色加鼠标移动变高亮

效果如下：



错误代码（只在srcipt中出现错误）：
<script>
window.onload=function(){
var oTab=document.getElementById('tab1');

for(var i=0;i<oTab.tBodies[0].rows.length;i++){
if (i%2==0){
oTab.tBodies[0].rows[i].style.background='snow';
}else{
oTab.tBodies[0].rows[i].style.background='white';
}
oTab.tBodies[0].rows[i].onmouseover=function(){                  <pre name="code" class="javascript">                    oTab.tBodies[0].rows[i]<span style="font-family: Arial, Helvetica, sans-serif;">.style.background='green';</span>
}; oTab.tBodies[0].rows[i].onmouseout=function(){ if (i%2==0){ oTab.tBodies[0].rows[i].style.background='snow'; }else{ oTab.tBodies[0].rows[i].style.background='white'; } }; } } </script>

在鼠标移入到哪一行时，这一行的背景颜色变为绿色，在鼠标移出时，如果i除2的余数是0的话，那么设置背景为snow，否则为white。
看似正确，但是其实这里是错误的，因为
oTab.tBodies[0].rows[i].onmouseover=function(){                  <pre name="code" class="javascript">                    oTab.tBodies[0].rows[i]<span style="font-family: Arial, Helvetica, sans-serif;">.style.background='green';</span>
 };


这里的意思其实是为oTab.tBodies[0].rows[i]的onmouseover属性设置一个方法，方法中的i与oTab.tBodies[0].rows[i]的i并不为同一个i。为了证明这一点，我写了如下的代码加以证明：
<script>
function counter(){
var n=0;
var oArray=[];
oArray
=function(n){return n++;}
oArray[n+1]=function(n){n=0};
return oArray;
}
var oArray=counter();
alert(oArray[1]);
</script>
因为设置了一个变量n为0，所以oAarray
实际为oArray[0]，而oArray[n+1]则为oArray[1]。那么如果oArray[1]中的方法function(n){n=0}中的n和oArray
中的n相同的话，那么运行之后应该跳出function(1){1=0}；但是运行结果如下：



我们将代码稍微修改一下：
<script>
function counter(){
var n=0;
var oArray=[];
oArray
=function(){return n++;}
oArray[n+1]=function(){n=0};
return oArray;
}
var oArray=counter();
oArray[0](); //让function运行一次
alert(oArray[0]());//因为oArray[0]已经运行一次，n加1。那么在此运行跳出的就是应该是1。
</script>
是不是这样呢？运行结果如下：



果然向我所说的那样，那么不是说n和函数外的n没有关系吗？怎么又会得到1呢？
原因是闭包的作用，在上面的代码中，我们先运行了一次counter()函数，这样就生成了一个数组oArray，在oArray中存储了两个函数分别是function(){return n++}和function(){n=0}。因为counter()函数的原因，使得function(){return n++}函数和function(){n=0}函数成为了counter闭包的一员，那么它俩均可以共享变量n。然后我们通过调用function(){return
n++}函数，那么此时就得到了如上的结果。
在回到我们的最初的错误代码当中，我将代码稍微修改一下：
<script>
window.onload=function(){
var oTab=document.getElementById('tab1');
for(var i=0;i<oTab.tBodies[0].rows.length;i++){
if (i%2==0){
oTab.tBodies[0].rows[i].style.background='snow';
}else{
oTab.tBodies[0].rows[i].style.background='white';
}
oTab.tBodies[0].rows[i].onmouseover=function(){
this.style.background='green';
};
oTab.tBodies[0].rows[i].onmouseout=function(){
if (i%2==0){
this.style.background='snow';
alert(i);
}else{
this.style.background='white';
alert(i);
}
};
}
}
运行一下看到的结果是：



跳出的结果是5。这是如何得到的呢？我们来分析一下：
代码中我们通过for循环对每一行的鼠标移入移出加入方法，其实就是如同在oArray数组中加入那两个方法一样，在窗口加载的时候（window.onload()），我们通过循环的方式在oTab.tBodies[0].rows数组中添加方法一样了五组移入移出方法，但是移出方法中的i并不是rows[i]中的i。然后我们在鼠标移入移出时其实就是相当于执行了一次移入移出方法，那么因为for循环的原因，变量i执行到最后是5；所以页面中跳出数字5。

正确代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表格</title>
<script>
window.onload=function(){
var oTab=document.getElementById('tab1');

for(var i=0;i<oTab.tBodies[0].rows.length;i++){
if (i%2==0){
oTab.tBodies[0].rows[i].style.background='snow';
}else{
oTab.tBodies[0].rows[i].style.background='white';
}
var oldcolor='';
oTab.tBodies[0].rows[i].onmouseover=function(){
oldcolor=this.style.background;
this.style.background='green';
};
oTab.tBodies[0].rows[i].onmouseout=function(){
this.style.background=oldcolor;
};
}
}
</script>
</head>
<body>
<table id="tab1" border="1" width="800px">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>27</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>27</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>27</td>
</tr>
<tr>
<td>5</td>
<td>张七</td>
<td>27</td>
</tr>
</tbody>
</table>
</body>
</html>
此文章为本人原创作品，如需引用，需说明引用出处，违反者将追究法律责任。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航