表格鼠标经过有底色的js

来源：互联网发布：西双版纳房地产数据编辑：程序博客网时间：2024/04/28 19:07

用了CSDN ID叫火龙果的网友的js

/**
 * 仿 Prototype 的 $ 方法
 */
window.$ = function(id) {
  if(typeof id == 'string') {
    return document.getElementById(id);
  }
  return id;
}
/**
 * 色彩渐变
 * @param start   起始颜色，使用 # 颜色表
 * @param end     终止颜色
 * @param step    渐变步长，大于 1 并且小于 200，默认为 16
 */
var ColorGradient = function(start, end, step) {
  this.start = this._toRGB(start);
  this.end = this._toRGB(end);
  this.step = (function() {
      if(!step || step < 1 || step > 200) {
        return 16;
      }
      return step;
    })();
  this.gradient = [];
}
ColorGradient.prototype = {
  // 获得渐变的颜色数组，以 6 位十六进制字符串返回
  getGradient : function() {
    return this._getGradient();
  },
  // 获得所设定的步长值
  getStep : function() {
    return this.step;
  },
  // 测试工作，用于在页面上渐变测试
  test : function() {
    var grad = this._getGradient();
    var n = 400 / this.step;
    var p = document.createElement('div');
    for(var i = 0; i < grad.length; i++) {
      var d = document.createElement('div');
      d.className = 'grad';
      d.style.width = n + 'px';
      d.style.backgroundColor = '#' + grad[i];
      p.appendChild(d);
    }
    document.body.appendChild(p);
  },
  // 生成渐变色数组
  _getGradient : function() {
    if(this.gradient.length > 0)  {
      // 如果渐变色变量中有值直接返回
      return this.gradienth;
    }
    // 生成各步的颜色
    for(var i = 0; i <= this.step; i++) {
      var color = this._getNewColor(i).toString(16);
      while(color.length < 6) {
        color = '0' + color;
      }
      this.gradient.push(color);
    }
    return this.gradient;
  },
  // 根据 RGB 变化量获得每步的 RGB 颜色
  _getNewColor : function(k) {
    var rgbStep = this._getStepRgb();
    var rgb = 0;
    for(var i = 0; i < 3; i++) {
      var c = Math.floor(this.start[i] + rgbStep[i] * k);
      rgb |= c << ((3 - i - 1) * 8);
    }
    return rgb;
  },
  // 获得 RGB 三种颜色的变化量
  _getStepRgb : function() {
    var rgb = [];
    // 依次获得 R、G、B 的变化步长
    for(var i = 0; i < 3; i++) {
      rgb.push(this._getStepVar(i));
    }
    return rgb;
  },
  // 根据渐变步长、起始、终止颜色获得步长的变化量
  _getStepVar : function(index) {
    return (this.end[index] - this.start[index]) / this.step;
  },
  // 将 # 颜色转换成 RGB 颜色数组
  // 索引 0 -- 红色 R
  // 索引 1 -- 绿色 G
  // 索引 2 -- 蓝色 B
  _toRGB : function(color) {
    var v = color.substring(1);
    var c = parseInt(v, 16);
    var rgb = [];
    for(var i = 0; i < 3; i++) {
      rgb.push(c >> ((3 - i - 1) * 8) & 0xff);
    }
    return rgb;
  }
}
/**
 * 事件处理工具类
 */
var Event = function(){}
Event = {
  /**
   * 为 element 使用 handler 处理程序添加至 event 事件
   * 兼容 IE 及 Firefox 等浏览器
   *
   * 例如为 botton 对象添加 onclick 事件，使用 clickEvent
   * 方法作为处理程序：
   *   Event.addEvent(botton, 'click', clickEvent);
   *
   * @param element  需要添加事件的对象（Object）
   * @param event    需要添加的事件名称（String），不加“on”
   * @param handler  需要添加的方法引用（Function）
   */
  addEvent : function(element, event, handler) {
    if(element.attachEvent) {
      element.attachEvent('on' + event, handler);
    } else if (element.addEventListener) {
      element.addEventListener(event, handler, false);
    } else {
      element['on' + event] = handler;
    }
  },
  /**
   * 添加事件处理程序时，只能添加一个方法的引用，并不能给
   * 方法加上参数。比如定义了 clickEvent(str) 这个方法，现
   * 在要将其作为 obj 的 onclick 的事件处理程序，就可以用：
   * obj.onclick = Event.getFuntion(null, clickEvent, str);
   */
  getFunction : function(obj, fun) {
    var args = [];
    obj = obj || window;
    for(var i = 2; i < arguments.length; i++) {
      args.push(arguments[i]);
    }
    return function() {
        fun.apply(obj, args);
      };
  }
}
var Table = function(id, time, start, end) {
  this.rows   = (function() {
      var tab = $(id);
      if(tab.tBodies.length == 0) {
        return tab.rows;
      }
      var rows = [];
      for(var i = 0; i < tab.tBodies.length; i++) {
        for(var j = 0; j < tab.tBodies[i].rows.length; j++) {
          rows.push(tab.tBodies[i].rows[j]);
        }
      }
      return rows;
    })();
  this.start  = start || Table.DEFAULT_START;
  this.end    = end || Table.DEFAULT_END;
  this.time   = time || Table.DEFAULT_TIME;
  var color = new ColorGradient(this.start, this.end, 16);
  this.grad   = color.getGradient();
  this.step   = color.getStep();
}
Table.DEFAULT_TIME = 10;
Table.DEFAULT_START = '#dcdcdc';
Table.DEFAULT_END = '#ffffff';
Table.prototype = {
  addEvent : function() {
    for(var i = 0; i < this.rows.length; i++) {
      this.rows[i].style.backgroundColor = this.end;
      Event.addEvent(this.rows[i], 'mouseover',
          Event.getFunction(this, this.overEvent, this.rows[i]));
      Event.addEvent(this.rows[i], 'mouseout',
          Event.getFunction(this, this.outEvent, this.rows[i]));
    }
  },
  overEvent : function(row) {
    row.style.backgroundColor = this.start;
    row.change = this.step;
  },
  outEvent : function(row) {
    var me = this;
    if(row.change-- > 0) {
      row.style.backgroundColor = '#' + me.grad[me.step - row.change];
      setTimeout(function() {
          me.outEvent(row);
        }, this.time);
    }
  },
  _getRows : function(id) {
    var tab = $(id);
    alert(tab.tBodies.length);
  }
}

保存为 tableboder.js

然后新建一个html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
  <title>Table</title>
  <script language="javascript" src="tableboder.js"></script>
  <script type="text/javascript">
    /**
    *
    *调用方法就是下面，用表格id把table new出来，加上事件。
    */
    window.onload = function() {
      var tab1 = new Table('tab1');
      tab1.addEvent();
    }
    </script>
</head>
<style type="text/css">
div.grad {
  float: left;
  height: 100px;
  margin: 0;
  padding: 0;
}
table {
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-spacing: 0;
  font-family: 宋体,新宋体;
}
table td {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  padding: 2px 5px;
}
</style>
<body>
<table id='tab1' width="60%" align="center">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
</table>
</body>
</html>

下面是个非常需要注意的小问题

引入外部js时，<script language="javascript" src="tableBoder.js"></script>必须写language 属性，而不能使type属性。