js 控制table行的颜色

最新推荐文章于 2022-12-27 13:57:25 发布

iteye_9657

最新推荐文章于 2022-12-27 13:57:25 发布

阅读量476

点赞数

分类专栏： html&css&javascript 文章标签： prototype IE Firefox C++ C

本文链接：https://blog.csdn.net/iteye_9657/article/details/81787720

版权

html&css&javascript 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

<!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>
</head>

<script type="text/javascript">

/**
* 仿 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);
}
}

window.onload = function() {
var tab = new Table('tab');
tab.addEvent();
}
</script>

<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>
<div id="k1"></div>
<div id="k2"></div>
<div id="k3"></div>
<div id="k4"></div>
<div id="k5"></div>
<div id="k6"></div>
<div id="k7"></div>

<table id="tab" border="0" cellspacing="0">
<tbody>
<tr>
<td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td>
</tr>
<tr>
<td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td>
</tr>
<tr>
<td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td>
</tr>
<tr>
<td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td>
<td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaa</td>
</tr>
</tbody>
</table>
</body>
</html>

iteye_9657

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 控制table行的颜色

Table/** * 仿 Prototype 的 $ 方法 */window.$ = function(id) { if(typeof id == 'string') { return document.getElementById(id); } return id;}/** * 色彩渐变 * ...
复制链接

扫一扫

专栏目录