用了CSDN ID叫火龙果的网友的js
保存为 tableboder.js
然后新建一个html
下面是个非常需要注意的小问题
引入外部js时,<script language="javascript" src="tableBoder.js"></script >必须写language 属性,而不能使type属性。
- /**
- * 仿 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);
- }
- }
然后新建一个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属性。