点击或鼠标移上表格的某一行后变色

posted by David Chen at July 13, 2009, 2:51 AM    

以下的代码，可以实现表格中的一行在鼠标点击或移上去后变色，鼠标移开后恢复颜色的功能。
.trbgcolor1 {
     background-color: #ffffff;
     text-align: center;
}
.trbgcolor2 {
     background-color: #eeeeee;
     text-align: center;
}
.trbgcolor3 {
     background-color: #cccccc;
     text-align: center;
}
.bgcolor1 {
     background-color: #cccccc;
}
.bgcolor2 {
     background-color: #ffffff;
}
.bgcolor3 {
     background-color: #eeeeee;
}

function rebgs(trTmp, bgClass) {
     var ch = trTmp.getElementsByTagName("INPUT");
     for(var c=0; c<ch.length; c++) {
          if(ch[c].name == 'weeks' || ch[c].name == 'amount' || ch[c].name == 'periodForm' || ch[c].name =='periodTo')
            ch[c].className = bgClass;
     }
}

// 以下用于保存上次点击和当前点击的tr
var tr1 = null;
var tr2 = null;

function trOnClick(trTmp) {
     rebgs(trTmp, 'bgcolor1');
     if(tr1 != null) {
          rebgs(tr1, 'bgcolor2');
          tr1.className = "trbgcolor1";
          tr1.onmouseover = function() { this.className = "trbgcolor2"; rebgs(this, 'bgcolor3'); };
          tr1.onmouseout = function() { this.className = "trbgcolor1"; rebgs(this, 'bgcolor2'); };
          tr2 = tr1;
     }
     trTmp.className = "trbgcolor3";
     trTmp.onmouseover = function() {};
     trTmp.onmouseout = function() {};
     tr1 = trTmp;
}

<tr class="trbgcolor1" onclick="trOnClick(this);" onmouseover="this.className='trbgcolor2';rebgs(this, 'bgcolor3');" onmouseout="this.className='trbgcolor1';rebgs(this, 'bgcolor2');">