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

时间：2007-04-21 来源：Jedliu

【提示】更新了一个版本的函数，这次的函数不需要循环判断选择的对象，具体内容参见本页的底部【关键字】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;
                        }
                    }
                }

以下为效果图:

500)this.width=500;" border=0> 完整代码:

文件:	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>