JSP表格行动态显示高亮

 XML/HTML：

  
   
   
  
  <script type="text/javascript" src="table-hover.js"></script>




<script type="text/javascript">
window.onload = function() {
  var tab = new TabHover('tab', 'tab2');
  tab.init();
}
</script>


   
   
类型
名称
名称
价格
日期
日期
类型
项目管理
comtop
comtop
1,000.00
2009-04-08
2009-05-08
活动项目
项目管理
comtop
comtop
1,000.00
2009-04-08
2009-05-08
活动项目
项目管理
comtop
comtop
1,000.00
2009-04-08
2009-05-08
活动项目
项目管理
comtop
comtop
1,000.00
2009-04-08
2009-05-08
活动项目
项目管理
comtop
comtop
1,000.00
2009-04-08
2009-05-08
活动项目
项目管理
comtop
comtop
1,000.00
2009-04-08
2009-05-08
活动项目
项目管理
comtop
comtop
1,000.00
2009-04-08
2009-05-08
活动项目


   
   
类型
名称
名称
价格
日期
日期
类型
项目管理
comtop
comtop
1,000.00
2009-04-08
2009-05-08
活动项目
项目管理
comtop
comtop
1,000.00
2009-04-08
2009-05-08
活动项目
项目管理
comtop
comtop
1,000.00
2009-04-08
2009-05-08
活动项目
项目管理
comtop
comtop
1,000.00
2009-04-08
2009-05-08
活动项目
项目管理
comtop
comtop
1,000.00
2009-04-08
2009-05-08
活动项目
项目管理
comtop
comtop
1,000.00
2009-04-08
2009-05-08
活动项目
项目管理
comtop
comtop
1,000.00
2009-04-08
2009-05-08
活动项目

JavaScript：

window.$ = function(id) {
  return typeof id == 'string' ? document.getElementById(id) : id;
}

String.prototype.trim = function() {
  return this.replace(/^\s+/, '').replace(/\s+$/, '');
}

var TabHover = function() {
  this.tabs = (function(args) {
      var s = [];
      for(var i = 0; i < args.length; i++) {
        s.push($(args[i]));
      }
      return s;
    })(arguments);
  this.hoverClass = ' x-table-hover';
  this.rowClass = [ ' x-table-odd', ' x-table-even' ];
}

TabHover.prototype = {
  init : function() {
    if(!this.tabs) {
      return;
    }
    for(var i = 0; i < this.tabs.length; i++) {
      this._processTBodies(this.tabs[i]);
    }
  },

  _processTBodies : function(tab) {
    if(!tab) {
      return;
    }
    for(var i = 0; i < tab.tBodies.length; i++) {
      this._addEffect(tab.tBodies[i].rows);
    }
  },

  _addEffect : function(rows) {
    var ref = this;
    for(var i = 0; i < rows.length; i++) {
      rows[i].className += this.rowClass[i % 2];
      rows[i].onmouseover = function() {
        this.className += ref.hoverClass;
      };
      rows[i].onmouseout = function() {
        this.className = this.className.replace(ref.hoverClass, '').trim();
      }
    }
  }
}