Question

对于带有数字的HTML表格，我正在寻找一种优雅的JavaScript / CSS方法来识别每列中相等值的组，并相应地为相应单元格的背景着色。我将在回归测试结果的网络演示中使用它。

在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>

enter image description here

Answer 1

我能想到这样的事情

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，所以如果你想使用它，请确保你还在你的网站上为旧浏览器加载了一个ES5-Shim库。此外，querySelectorAll的选择器应该更具体，最好的情况是你可以给该表一个id。最后，在此示例中，每Math.random()生成一次颜色生成，您可能希望自己定义颜色。

此示例代码创建一个空对象并将其用作哈希。可用的td值作为键名创建一次，每个键的值是td的数组，它们共享相同的文本内容。完成之后，我们遍历该哈希并为每个td组设置随机背景颜色。

Answer 2

你可以使用Jquery，

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

Answer 3

这是一个纯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功能

Answer 4

假设该值为十进制数，则可以用商除以％10来提取颜色。

颜色选择功能

    choiceColor (value) {
        let colors = ['red', 'pink', 'purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'lime']
        return colors[value % 10]
    }

如何为相同元素的表格单元格着色

4 个答案: