js 当鼠标移动到表格一行上时，该行背景颜色改变

最新推荐文章于 2022-04-02 15:48:51 发布

十一路客

最新推荐文章于 2022-04-02 15:48:51 发布

阅读量1.4w

点赞数

分类专栏： JS 文章标签： js table bgcolor

JS 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

1. js，当鼠标移动到表格一行上时，该行背景颜色改变

<script type="text/javascript">
  var rows=document.getElementsByTagName('tr')
  for(var i=0;i<rows.length;i++){
  rows[i].οnmοuseοver=function(){
      this.className+='highlight';
   }
   
  rows[i].οnmοuseοut=function(){
      this.className=this.className.replace('highlight','');
   }

}


2.js实现选中表格的某一行并且改变其背景的一段代码

http://blog.chinaunix.net/uid-10508451-id-2950847.html

 
 
  
  
   
   
    
    【关键字】js javascript 实现 表格 选中 一行 改变 背景 弹出选中行号
   
   
   
   
    
     
   
   
   
   
    
    具体功能:
   
   
   
   
     
     
      
      鼠标滑过表格时,表格中行会提示鼠标在这行中,改行的背景色改变
     
     

     
     
      
      鼠标离开某一行时,将其背景色还原为白色
     
     

     
     
      
      鼠标点击某一行时,设置其背景色为选中色(只能有一行为选中色)
     
     
   
   注意:使用改代码是行或者列好像不好使用CLASS来指定样式,如果要指定样式,使用STYLE属性来指定即可.该代码支持FireFox,只是鼠标手势不显示.
   
   代码:

   
   //注意设置颜色时16进制的颜色代码必需要小写

            var colorOver        ="#a4d3ee";//鼠标经过时的颜色

            var colorClick    ="#00ee00";//鼠标单击时的颜色

            var colorNone        ="#ffffff";//默认的背景色

            function clickSet(Obj){
                    var tb=document.getElementById("table1");
                    var chooseRowNo=999;
                    for(i=0;i<tb.rows.length;i++)
                    {//设置所有行的背景色为默认背景色

                        tb.rows[i].bgColor=colorNone;
                        if(tb.rows[i]==Obj)
                        {
                            chooseRowNo=i;
                            }
                        }
                    if(chooseRowNo!=999)
                    {tb.rows[chooseRowNo].bgColor=colorClick;}
            }
            function mouseoverSet(Obj){
                    var tb=document.getElementById("table1");
                    var mouseoverRowNo=999;
                    //清除所有的其他行的鼠标通过的颜色

                    for(i=0;i<tb.rows.length;i++)
                    {
                        if(tb.rows[i].bgColor==colorOver)
                            tb.rows[i].bgColor=colorNone;
                        if(tb.rows[i]==Obj)
                        {
                            mouseoverRowNo=i;
                            }
                        }
                    if(mouseoverRowNo!=999&&tb.rows[mouseoverRowNo].bgColor!=colorClick)
                    {tb.rows[mouseoverRowNo].bgColor=colorOver;}
                }
            function clearColor(Obj){
                var tb=document.getElementById("table1");
                //清除所有的背景色为鼠标通过颜色的行
                for(i=0;i<tb.rows.length;i++)
                {
                    if(colorOver==tb.rows[i].bgColor)
                    {
                        tb.rows[i].bgColor=colorNone;
                        }
                    }
                }
   
   以下为效果图:
   
   
    
    
   
   
   
   
    
    完整代码:
    
     
        文件: tableSelect.rar
大小: 0.88KB
下载: 下载
   
   
   
   
    
     
   
   
   
   
    
    
   
   
   
   
    
    改进：
   
   
   
   
    
    上面设置鼠标滑过的颜色时，使用的是循环判断的办法，这样的效率在行比较多的情况下会比较低，其实有更为简洁的办法，需要改进的函数如下：
   
   
   
   
    
     
   
   
   
   
   
   
   
   function mouseoverSet(Obj){
                    if(Obj.bgColor!=colorClick)
                        Obj.bgColor=colorOver;
                }
function clearColor(Obj){
                    if(Obj.bgColor!=colorClick)
                        Obj.bgColor=colorNone;
                }
   
   -->因为在选中的时候需要返回选中的具体行数,所以点击设置颜色仍然使用循环判断,考虑是否有办法再改进了呢?
   
   
   
   
    
    
    
    
   
   
   
   
    
    【第三版：最新改进版】
   
   
   
   
    
    鼠标手势在FF中不可以使用，是因为FF中手势的写法不同，将cursor设置为pointer就可以兼容IE和FF了。
   
   
   
   
   
   <!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">
    .tr-color{
         background-color:#FFFFFF;
    }
    .cursor{
        cursor:pointer;
    }
</style>
<script language="javascript">
    var defaultColor="#ffffff";
    var overColor="yellow";
    var clickColor="pink";
    var chooseRow=9999;
    function over_color(obj){
        if(obj.style.backgroundColor!=clickColor)
            obj.style.backgroundColor=overColor;
    }
    function remove_color(obj){
        if(obj.style.backgroundColor!=clickColor)
            obj.style.backgroundColor=defaultColor;
    }
    function click_color(obj){
        var tb=obj.parentNode;//获得父节点对象
        if(chooseRow!=9999){
            var lastObj=tb.rows[chooseRow];
            lastObj.style.backgroundColor=defaultColor;
        }
        chooseRow=obj.rowIndex;//获得当前行在表格中的序数
        obj.style.backgroundColor=clickColor;        
    }
</script>
</head>

<body>
<table width="200" border="0" cellpadding="1" cellspacing="1" bgcolor="#000000" id="mxtable">
<tr onmouseover="over_color(this)" onmouseout="remove_color(this)" onclick="click_color(this)" class="tr-color cursor">
    <td>abc</td>
    <td>efg</td>
  </tr>
<tr onmouseover="over_color(this)" onmouseout="remove_color(this)" onclick="click_color(this)" class="tr-color cursor">
    <td>123</td>
    <td>456</td>
  </tr>
<tr onmouseover="over_color(this)" onmouseout="remove_color(this)" onclick="click_color(this)" class="tr-color cursor">
    <td>kgh</td>
    <td>afd</td>
  </tr>
</table>
</body>
</html>

十一路客

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
js 当鼠标移动到表格一行上时，该行背景颜色改变

1. js，当鼠标移动到表格一行上时，该行背景颜色改变 var rows=document.getElementsByTagName('tr') for(var i=0;i<rows.length;i++){ rows[i].onmouseover=function(){ this.className+='highlight'; } rows[i].o
复制链接

扫一扫

专栏目录