Question

我会给你指向确切表格的链接我想这样做：http://pt.omerta-stats.tk/?page=smuggling

例如，该页面上的第一个表格。该表左侧有8个城市，每个城市有7个产品的价格。让我们关注Morphine专栏。其中一个城市的价格最高，其他城市的价格最低。我想为这些表格单元格添加一个css类。

必须对所有表格列进行此操作。

随意使用PHP，JQuery，简单的JavaScript，纯CSS或其他。

Answer 1

以下内容将为您提供帮助。您可以将其重构为更通用，因为我只是处理您的具体示例以帮助您入门。

var tdCount = $('#narcsTable tr:eq(1) td').length,
    trCount = $('#narcsTable tr').length;

for (var i = 1; i < tdCount; i++) {
    var $td = $('#narcsTable tr:eq(2) td:eq(' + i + ')'),
        highest = 0,
        lowest = 9e99;

    for (var j = 3; j < trCount; j++) {
        $td = $td.add('#narcsTable tr:eq(' + j + ') td:eq(' + i + ')');
    }

    $td.each(function(i, el){
        var $el = $(el);
        if (i >= 0) {
            var val = parseInt($el.text().replace(/[\$,]/g, ''), 10);
            if (val > highest) {
                highest = val;
                $td.removeClass('high');
                $el.addClass('high');
            }
            if (val < lowest) {
                lowest = val;
                $td.removeClass('low');
                $el.addClass('low');
            }
        }
    });
}

编辑为i >= 0，因为第一个i为0（演示未更新）

See Demo

Answer 2

有时单元格值为空，在这种情况下上述答案都不起作用我通过更新@mVChr代码来解决此问题。

function HighlightColumn() {
        try {
            var tdCount = $('#narcsTabletr:eq(1) td').length;
            var trCount = $('#narcsTabletr').length;

            for (var i = 1; i < tdCount; i++) {
                var $td = $('#narcsTabletr:eq(2) td:eq(' + i + ')');

                for (var j = 3; j < trCount; j++) {
                    $td = $td.add('#narcsTabletr:eq(' + j + ') td:eq(' + i + ')');
                }
                var cellprice = [];
                $td.each(function (i, el) {
                    var $el = $(el);
                    var cellValue = parseInt($el.text().replace(/[\$,]/g, ''), 10);
                    if (!isNaN(cellValue)) {
                        cellprice.push(cellValue);
                    }
                });

               // console.log(cellprice);

                var minValue = cellprice.min();
                var maxValue = cellprice.max();

              //  console.log('minValue=' + minValue);
              //  console.log('maxValue=' + maxValue);

                $td.each(function (i, el) {
                    var $el = $(el);
                    if (i >= 0) {
                        var cellValue = parseInt($el.text().replace(/[\$,]/g, ''), 10);

                        if (cellValue == minValue) {
                            $el.addClass('low');
                        }
                        if (cellValue == maxValue) {
                            $el.addClass('high');
                        }
                    }
                });
            }
        } catch (exception) {
            console.log(exception);
        }
    }
    Object.defineProperty(Array.prototype, "max", {
        enumerable: false,
        configurable: false,
        writable: false,
        value: function () {
            return Math.max.apply(null, this);
        }
    });
    Object.defineProperty(Array.prototype, "min", {
        enumerable: false,
        configurable: false,
        writable: false,
        value: function () {
            return Math.min.apply(null, this);
        }
    });

突出显示[添加类]每个表列的最大值

2 个答案:

See Demo