关于javascript单击表格某行变颜色问题！谢谢

Question

关于javascript单击表格某行变颜色，再单击另一行，原来一行颜色变回来，本行变颜色
大侠们帮我写个javascript 谢谢了 试好立刻结贴 急啊

Answer 1

　<table width="100%" border="0" cellspacing="0" cellpadding="0" id="ServiceListTable"> 
　　<tr> 
　　<th>服务事项</th> 
　　<th>N</th> 
　　<th>状态</th> 
　　<th>办结</th> 
　　<th>资料</th> 
　　</tr> 
　　<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
　　<td>相关内容</td> 
　　<td align="center">&nbsp;</td> 
　　<td align="center">&nbsp;</td> 
　　<td align="center">&nbsp;</td> 
　　<td align="center">&nbsp;</td> 
　　</tr> 
　　<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
　　<td>相关内容</td> 
　　<td align="center">&nbsp;</td> 
　　<td align="center">&nbsp;</td> 
　　<td align="center">&nbsp;</td> 
　　<td align="center">&nbsp;</td> 
　　</tr> 
　　<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
　　<td>相关内容</td> 
　　<td align="center">&nbsp;</td> 
　　<td align="center">&nbsp;</td> 
　　<td align="center">&nbsp;</td> 
　　<td align="center">&nbsp;</td> 
　　</tr> 
　　<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
　　<td>相关内容</td> 
　　<td align="center">&nbsp;</td> 
　　<td align="center">&nbsp;</td> 
　　<td align="center">&nbsp;</td> 
　　<td align="center">&nbsp;</td> 
　　</tr> 
　　</table>
//点击当前选中行的时候设置当前行的颜色，同时恢复除当前行外的行的颜色及鼠标事件 
　　function selectRow(target) 
　　{ 
　　var sTable = document.getElementById("ServiceListTable") 
　　for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行 
　　{ 
　　if (sTable.rows[i] != target) //判断是否当前选定行 
　　{ 
　　sTable.rows[i].bgColor = "#ffffff"; //设置背景色 
　　sTable.rows[i].onmouseover = resumeRowOver; //增加onmouseover 事件 
　　sTable.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件 
　　} 
　　else 
　　{ 
　　sTable.rows[i].bgColor = "#d3d3d3"; 
　　sTable.rows[i].onmouseover = ""; //去除鼠标事件 
　　sTable.rows[i].onmouseout = ""; //去除鼠标事件 
　　} 
　　} 
　　} 
　　//移过时tr的背景色 
　　function rowOver(target) 
　　{ 
　　target.bgColor='#e4e4e4'; 
　　} 
　　//移出时tr的背景色 
　　function rowOut(target) 
　　{ 
　　target.bgColor='#ffffff'; 
　　} 
　　//恢复tr的的onmouseover事件配套调用函数 
　　function resumeRowOver() 
　　{ 
　　rowOver(this); 
　　} 
　　//恢复tr的的onmouseout事件配套调用函数 
　　function resumeRowOut() 
　　{ 
　　rowOut(this); 
　　} 
　　//点击当前选中行的时候设置当前行的颜色，同时恢复除当前行外的行的颜色及鼠标事件
　　function selectRow(target)
　　{
　　var sTable = document.getElementById("ServiceListTable")
　　for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行
　　{
　　if (sTable.rows[i] != target) //判断是否当前选定行
　　{
　　sTable.rows[i].bgColor = "#ffffff"; //设置背景色
　　sTable.rows[i].onmouseover = resumeRowOver; //增加onmouseover 事件
　　sTable.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件
　　}
　　else
　　{
　　sTable.rows[i].bgColor = "#d3d3d3";
　　sTable.rows[i].onmouseover = ""; //去除鼠标事件
　　sTable.rows[i].onmouseout = ""; //去除鼠标事件
　　}
　　}
　　}
　　//移过时tr的背景色
　　function rowOver(target)
　　{
　　target.bgColor='#e4e4e4';
　　}
　　//移出时tr的背景色
　　function rowOut(target)
　　{
　　target.bgColor='#ffffff';
　　}
　　//恢复tr的的onmouseover事件配套调用函数
　　function resumeRowOver()
　　{
　　rowOver(this);
　　}
　　//恢复tr的的onmouseout事件配套调用函数
　　function resumeRowOut()
　　{
　　rowOut(this);
　　}

Answer 2

table 鼠标移动变色2008-03-28 14:07                    <table style="width:760px; line-height:28px;border-collapse: collapse;">
                        <tr style="cursor:hand;" onmouseover="javascript:this.bgColor='#6DC800'" onmouseout="javascript:this.bgColor='#FFFFFF'" onmousedown="window.open('go.aspx?id=<%#DataBinder.Eval(Container.DataItem,"AutoID")%>','_blank')">
                            <td style="width:10px;"></td>
                            <td style="width:90px;"><%#DataBinder.Eval(Container.DataItem,"UserName")%></td>
                            <td style="width:180px;"><%#DataBinder.Eval(Container.DataItem,"ComeName")%></td>
                            <td style="width:180px;"><%#DataBinder.Eval(Container.DataItem,"GoName")%></td>
                            <td style="width:100px;"><%#DataBinder.Eval(Container.DataItem,"GoingTime")%></td>
                            <td style="width:100px;"><%#DataBinder.Eval(Container.DataItem, "AboutMoney")%>元</td>
                            <td style="width:100px;"><%#DataBinder.Eval(Container.DataItem,"GoingPoint")%></td>
                        </tr>
                    </table> 

Answer 3

<html>
<head>
<style>
.tr_on{
background-color:blue;
}
tr{
background-color:red;
}
</style>
<script>
function init(){
var arr = document.getElementById("tab").getElementsByTagName("tr");
for(var i=0;i<arr.length;i++){
arr[i].onclick = function(){
var parent = this.parentNode;
for(var j=0;j<parent.childNodes.length;j++){
parent.childNodes[j].className = "";
}
this.className="tr_on";
}
}
}
</script>
</head>
<body onLoad="init()">
<table id="tab">
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
</table>
</body>
</html>

Answer 4

<html><head><title></title>
<script language="javascript">    var selrow;     //单击行
    var edit;//双击
    function selecte(obj)
    {
        if(edit!=null&&edit!=obj)
        {  
            var alltd = edit.childNodes;
            var num = alltd.length
            var tmp;
            for(var i=0;i <num;i++)
            {
                tmp=alltd[i].childNodes[0].value;
                alltd[i].removeChild(alltd[i].childNodes[0]);
                alltd[i].innerText=tmp;
            }
            edit=null; 
        }
        if(selrow!=null)
        {
            selrow.bgColor = "gray";
        }
        selrow=obj;
        selrow.bgColor = "blue";
    }
    
    function mousein(obj)
    {
        if(obj!=selrow)
        obj.bgColor ="#0080FF";
    }
    function mouseout(obj)
    {
        if(obj!=selrow)
        obj.bgColor = "gray";
    }
    // 编辑行 双击行
    function dc(obj)
    {
        if (edit!=obj)
        {
var alltd = obj.childNodes;
var num = alltd.length
for(var i=0;i <num;i++)
            {
var newinput =document.createElement("<input type=\"text\" value=\""+alltd[i].innerText+"\">");
alltd[i].innerText="";
alltd[i].appendChild(newinput);
}
edit=obj;
        }        
    }
    function addrow()
    {   
      
        var con = document.getElementById("test");
        var row = con.insertRow(-1);
        row.bgColor="gray";
        row.onclick=function(){selecte(row)};
        row.onmouseover=function(){mousein(row)};
        row.onmouseout=function(){mouseout(row)};
        row.ondblclick=function(){dc(row)};
         cel1 = row.insertCell();
         cel2 = row.insertCell();
         cel3 = row.insertCell();
         cel4 = row.insertCell();
         cel5 = row.insertCell();
         cel1.innerText = "新学号";
         cel2.innerText = "新姓名";
         cel3.innerText = "输入年龄";
         cel4.innerText = "输入性别";
         cel5.innerText = "输入班级";        
    }
</script></head><body>
<table id="t0" border="1" cellspacing="1">
    <tr>
        <td align="right">
            <input type="button" value="添加" id="but1" onclick="javascript:addrow();">
            <input type="button"  value="提交" id="but2" onclick="">
        </td>
    </tr>
    <tr>
        <td><table id="test" border="1" width="100%" height="100%" cellspacing="1" bgColor="gray">
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>班级</th>
            </tr>
            <tr id="tr2" onclick="javascript:selecte(this);"  onmouseover="javascript:mousein(this);" onmouseout="javascript:mouseout(this);" ondblclick="javascript:dc(this);" bgColor="gray">
                <td>001</td>
                <td>孙小儿</td>
                <td>23</td>
                <td>男</td>
                <td>812</td>
            </tr> 
        </table></td>
    </tr>
</table>
</body></html>