的JavaScript / CSS:如何颜色等于元素的表格单元格组

对于数字的HTML表,我找了一个优雅的JavaScript / CSS的方法来确定每一列中的值相等的团体和颜色据此相应单元格的背景。 我会在回归测试结果的Web演示文稿中使用它。

在python我可能会使用类似itertools.groupby()。

为了说明这一点,我有截图的例子和相应的HTML代码(手动构造)。

<head> <style> td {font-family: Monospace; font-size:16; } </style> </head> <body> <table border=1> <tr><td>1.111</td></tr> <tr><td>1.111</td></tr> <tr><td bgcolor="LightBlue">2.222</td></tr> <tr><td>1.111</td></tr> <tr><td bgcolor="LightBlue">2.222</td></tr> <tr><td> 1.111</td></tr> <tr><td bgcolor="LightBlue">2.222</td></tr> <tr><td bgcolor="Goldenrod">3.333</td></tr> <tr><td> 1.111</td></tr> </table> </body>

的JavaScript / CSS:如何颜色等于元素的表格单元格组

--------------解决方案-------------

这里是一个纯JavaScript解决方案(带的jsfiddle)您发布样本源的工作原理:

function colorTableCells() {
'use strict';
var i = 0; //counter variable
var j = 0; //counter variable
var k = 0; //counter variable
var m = 0; //counter variable
var n = 0; //counter variable
var tables = document.getElementsByTagName('table'); //All tables as a collection.
var rows = []; //table rows collection, needed to determine columns
var cells = []; //td collection
var cell = {}; //used first as a Cell object (custom, see below) and then as a td (after all unique values by column have been determined
var values = []; //array of Cell objects (custom, see below).
var columnColorMap = {
'column0': 'gray',
'column1': 'purple',
'column2': 'pink',
'column3': 'mint',
'column4': 'cyan'
}; //columnColorMap holds the shade with which to color the column.
var C = function () {
//Cell Object, holds properties unique to the cells for coloring
this.value = 0; //Cell value
this.color = {
'red': 255,
'green': 255,
'blue': 255
}; //Cell color, determined by column
this.shades = {
'gray': [this.color.red, this.color.green, this.color.blue],
'purple': [this.color.red, this.color.green],
'pink': [null, this.color.green, this.color.blue],
'mint': [this.color.red, , this.color.blue],
'cyan': [this.color.red],
'magenta': [null, this.color.green],
'yellow': [null, null, this.color.blue]
}; //A quick way to determine the shade for the column. It holds color values to modify (and always in RGB order) or a null value if R, G, or B should be left alone.
this.column = 0; //Column the cell is in, relative to the table it is in.
this.darken = function (stepValue, hue) {
//function that returns a new color, based on the hue that is passed in
var decrement = 8;
var i = 0;
var ret = {
'red': 255,
'green': 255,
'blue': 255
};
if (!stepValue) {
stepValue = 0;
}
decrement = decrement * stepValue;
for (i = 0; i < hue.length; i += 1) {
if (hue[i]) {
hue[i] = hue[i] - decrement;
}
}
if (hue[0]) {
ret.red = hue[0];
}
if (hue[1]) {
ret.green = hue[1];
}
if (hue[2]) {
ret.blue = hue[2];
}
return ret;
};
this.getHexBackgroundColorString = function () {
//returns `rbg(val, val, val) as '#RRGGBB'
var s = '';
var red = this.color.red.toString(16);
var green = this.color.green.toString(16);
var blue = this.color.blue.toString(16);
if (red.length < 2) {
red = '0' + red;
}
if (green.length < 2) {
green = '0' + green;
}
if (green.length < 2) {
blue = '0' + blue;
}
s = '#' + red + green + blue;
return s.toUpperCase();
};
};
var colHasValue = function (array, cell) {
//loop through array, returns 'if cell.value && cell.column are found or otherwise'
var i = 0;
var found = false;
for (i = 0; i < array.length; i += 1) {
if (array[i].value === cell.value && array[i].column === cell.column) {
found = true;
i = array.length;
}
}
return found;
};
for (i = 0; i < tables.length; i += 1) {
cells = tables[i].getElementsByTagName('td'); //get all td elements per table
for (j = 0; j < cells.length; j += 1) {
cell = new C(); //grab a new Cell object
cell.value = parseFloat(cells[j].innerText); //capture cell value
cell.column = cells[j].cellIndex; //capture cell column
if (!colHasValue(values, cell)) {
//hasn't been previously stored yet, so darken according to column and store
cell.color = cell.darken(j, cell.shades[columnColorMap['column' + cell.column.toString()]]);
values.push(cell); //capture all unique values
}
}
rows = tables[i].getElementsByTagName('tr'); //grab all rows by table
for (k = 0; k < rows.length; k += 1) {
//start looping through all the rows
for (m = 0; m < rows[k].childNodes.length; m += 1) {
//start looping through all of the row's children
if (rows[k].childNodes[m].nodeName.toLowerCase() === 'td') {
cell = rows[k].childNodes[m]; //found a td element, alias to cell for easier use
for (n = 0; n < values.length; n += 1) {
//loop through stored cell values
if (parseFloat(cell.innerText) === values[n].value && cell.cellIndex === values[n].column) {
//value and column matches
cell.style.backgroundColor = values[n].getHexBackgroundColorString(); //set background-color
n = values.length; //exit for
}
}
}
}
}
}
}
colorTableCells();

修改以下任何(或全部),以改变颜色:

  • shades收集
  • columnColorMap对象
  • darken功能

我能想到的是这样的

var lookup = Object.create( null );

Array.prototype.forEach.call( document.querySelectorAll('table td'), function( td ) {
var id = td.textContent.trim();

if( typeof lookup[ id ] === 'undefined' ) {
lookup[ id ] = [ td ];
}
else {
lookup[ id ].push( td );
}
});

Object.keys( lookup ).forEach(function( name ) {
if( lookup[ name ] && lookup[ name ].length ) {
var rnd = 'rgba(red,green,blue,1)'
.replace( 'red', ~~(Math.random() * 255) )
.replace( 'green', ~~(Math.random() * 255) )
.replace( 'blue', ~~(Math.random() * 255) );

lookup[ name ].forEach(function( td ) {
td.style.backgroundColor = rnd;
});
}
});

演示:http://jsfiddle.net/ch6qZ/1/

小心的新词:上面的代码在很大程度上依赖于ES5,所以如果你想使用它确保你也已经装上你的网站浏览器old'ish的ES5,沉库。 此外,对于选择querySelectorAll应的方式更加具体,最好的情况下,你可以给该表的ID。 最后颜色每一代发生Math.random()在这个例子中,你可能想在自己定义颜色。



此示例代码创建一个空的对象,并使用它作为一个哈希值。 可用td值创建一次作为键名,并为每个键的值是一个数组td的共享同一个文本内容。 之后做到这一点,我们遍历散列,并设置一个随机的背景颜色为每个td -组。

你可以使用jQuery,

$("td:contains('2.222')").css("background-color","LightBlue");
$("td:contains('3.333')").css("background-color","Goldenrod");

分类:JavaScript的 时间:2012-06-06 人气:0
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.886 (s). 10 q(s)