jquery - 高亮【添加类】每个表格列的最大值

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（演示未更新）

看演示

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);
        }
    });