pasadinhas pasadinhas - 1 year ago 71
jQuery Question

Highlight [Add Class] the biggest value of each table column

I'll give you the link to exact table i wanna do this:

For example, the first table on that page. The table has 8 cities on the left and the price of 7 products in each city. Let's focus on

column. In one of those cities the price will be the highest and on other city there will be lowest. I want to add a css class to those table cells.

This would have to be done to all table columns.

Feel free to use PHP, JQuery, simple JavaScript, pure CSS, or others.

Answer Source

Something like the following will do the trick for you. You can refactor this to be more generic as I'm just dealing with your specific example to get you started.

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;
            if (val < lowest) {
                lowest = val;

Edited to i >= 0 because the first i is 0 (Demo wasn't updated)

See Demo