点击table设置tr颜色，点击别出的tr，该处tr变色，原来处tr变回原来的颜色

如题。我在<tr>上加了一个onclick(this)事件。在js里代码为tab.style.backgroundColor = "red";
这样的确实现了点击表格相应tr变色，但是现在出现了一个问题：
当我再次点击其他tr的时候，原来的tr仍然为红色。我想在我点击其他tr时，前一个tr变回原色，会的大侠救命~~！急

解决方案 »

  1.   


    <style>
    .tr1{
    background-color:#FFFFFF;
    }
    .tr2{
    background-color:#F2F5F2;
    }
    .overtr{
    background-color:#BBE1FF;
    }
    .clicktr{
    background-color:#F8E147;
    }
    </style>
    <table id="table1">
    <tr>
    <td>1111111111111</td>
    </tr>
    <tr>
    <td>222222222</td>
    </tr>
    <tr>
    <td>3333333333</td>
    </tr>
    <tr>
    <td>444444444444</td>
    </tr>
    <tr>
    <td>555555555555</td>
    </tr>
    </table>
    <script>
    var flags = new Array();// 记录是否变色，true 变，false 不变
    function init(id){
    var trs = document.getElementById(id).getElementsByTagName("tr");
    for(var i = 0;i < trs.length;i++){
    flags.push("false");
    trs[i].className = i % 2 == 1 ? "tr1" : "tr2";
    trs[i].style.cursor = "hand";
    trs[i].onmouseover = function(){
    this.className = "overtr";
    };
    trs[i].onclick = new Function("this.className = 'clicktr';myClear(" + i + ");flags[" + i + "] = 'true';");
    trs[i].onmouseout = new Function("if(flags[" + i + "] == 'true'){this.className = 'clicktr';}else{this.className = " + i + " % 2 == 1 ? 'tr1' : 'tr2';}");
    }
    }function myClear(index){
    var trs = document.getElementById("table1").getElementsByTagName("tr");
    for(var i = 0;i < flags.length;i++){
    if(i == index){
    trs[i].className = "clicktr";
    }else{
    trs[i].className = i % 2 == 1 ? "tr1" : "tr2";
    }
    flags[i] = "flase";
    }
    }init("table1")
    </script>
      

  2.   

    用一个全局变量保存当前行var curtab = null;
    function do_onclick(tab){
      if(curtab != null) curtab.style.backgroundColor = "white"; 
      tab.style.backgroundColor = "red";
      curtab = tab;
    }
      

  3.   

    上面那个有点复杂。
    var lasttr = null;
    onclick方法
    function trClick(o){
         if(lasttr)
            lasttr.styel.backgroundColor = '';
         o.styel.backgroundColor = 'red';
         lasttr = o;
    }
      

  4.   

    也可以用tab的属性去保存
    <body>
    <table id="table1">
        <tr onClick="ss(this)">
            <td>1111111111111</td>
        </tr>
        <tr onClick="ss(this)">
            <td>222222222</td>
        </tr>
        <tr onClick="ss(this)">
            <td>3333333333</td>
        </tr>
        <tr onClick="ss(this)">
            <td>444444444444</td>
        </tr>
        <tr onClick="ss(this)">
            <td>555555555555</td>
        </tr>
    </table>
    <script>
    var $ = function(id){return document.getElementById(id)};
    function ss(obj){
    if(!$('table1').trcolor)
    {$('table1').trcolor=obj;obj.style.backgroundColor="red";return;}
    $('table1').trcolor.style.backgroundColor="#FFFFFF";
    obj.style.backgroundColor="red";
    $('table1').trcolor=obj
    }
    </script>
    </body>
      

  5.   

    Tr.onmouseover = function(){this.className="OverClass";}
    Tr.onmouseout = function(){this.className = "OutClass";}