Is there any way to find the highest value of each column (in a html table) and to add a class to it using js or jQuery?

Note: the table is build with <thead> and <tbody>

The table looks like this:

  <table>
    <thead>
      <tr>
        <th class="age">age</th>
        <th class="success">success</th>
        <th class="weight">weight</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>20</td>
        <td>30%</td>
        <td>70.5kg</td>
      </tr>
      <tr>
        <td>30</td>
        <td>40%</td>
        <td>80.9kg</td>
      </tr>
      <tr>
        <td>13</td>
        <td>60%</td>
        <td>20.53kg</td>
      </tr>
      <tr>
        <td>44</td>
        <td>80.44%</td>
        <td>20kg</td>
      </tr>
    </tbody>
  </table>

Codepen

Is there any way to find the highest value of each column (in a html table) and to add a class to it using js or jQuery?

Note: the table is build with <thead> and <tbody>

The table looks like this:

  <table>
    <thead>
      <tr>
        <th class="age">age</th>
        <th class="success">success</th>
        <th class="weight">weight</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>20</td>
        <td>30%</td>
        <td>70.5kg</td>
      </tr>
      <tr>
        <td>30</td>
        <td>40%</td>
        <td>80.9kg</td>
      </tr>
      <tr>
        <td>13</td>
        <td>60%</td>
        <td>20.53kg</td>
      </tr>
      <tr>
        <td>44</td>
        <td>80.44%</td>
        <td>20kg</td>
      </tr>
    </tbody>
  </table>

Codepen

• javascript
• jquery
• html-table

• What is the value type, int.? If you can post rendered HTML, that would help us to provide better answer. – Tariqulazam Commented Oct 27, 2012 at 2:11
• 1 Why don't you post a sample of the table on jsfiddle? – Steve Wellens Commented Oct 27, 2012 at 2:14

4 Answers 4

FIDDLE - http://jsfiddle/tariqulazam/esfj9/

JAVASCRIPT

var $table = $("#mytable");
$table.find("th").each(function(columnIndex)
{
    var oldValue=0, currentValue=0, $elementToMark;
    var $trs = $table.find("tr");
    $trs.each(function(index, element)
    {
        $(this).find("td:eq("+ columnIndex +")").each(function()
        {
            if(currentValue>oldValue)
               oldValue = currentValue;
            currentValue = parseFloat($(this).html());
            if(currentValue > oldValue)
            {
                $elementToMark = $(this);
            }
            if(index == $trs.length-1)
            {
              $elementToMark.addClass("highest"); 
            }
        });
    });
});​

​CSS

.highest{
    color:Red;
}​

​Here's the JSFiddle I made:JSFiddle

Here's the function, using jQuery

function MarkLargest() {
    var colCount = $('th').length;
    var rowCount = $('tbody tr').length;
    var largestVals = new Array();

    for (var c = 0; c < colCount; c++) {
        var values = new Array();
        for (var r = 0; r < rowCount; r++) {
            var value = $('tbody tr:eq(' + r + ') td:eq(' + c + ')').text();
            value = value.replace("%", "").replace("kg", "");
            values.push(value);
        }
        var largest = Math.max.apply(Math, values);
        largestVals.push(largest);

        $('tbody tr').each(function() {
            var text = $(this).find('td:eq(' + c + ')').text();
            text = text.replace("%", "").replace("kg", "");
            if (text == largest) {
                $(this).find('td:eq(' + c + ')').addClass("max");
            }
        });
    }

    return largestVals[column];
}

$(function() {
    MarkLargest();
})​

OK, my first answer only returned the highest value of a particular column. I think this is what you are looking for (in vanilla JavaScript):

HTML

  <table id="mytable">
    <thead>
      <tr>
        <th class="age">age</th>
        <th class="sucess">sucess</th>
        <th class="weight">weight</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>20</td>
        <td>30%</td>
        <td>70.5kg</td>
      </tr>
      <tr>
        <td>30</td>
        <td>40%</td>
        <td>80.9kg</td>
      </tr>
      <tr>
        <td>13</td>
        <td>60%</td>
        <td>20.53kg</td>
      </tr>
      <tr>
        <td>44</td>
        <td>80.44%</td>
        <td>20kg</td>
      </tr>
    </tbody>
  </table>

JavaScript

function markColumnCeilings ( table ) {

    if ( table === null ) return;

    var thead = table.tHead,
        tbody = table.tBodies[0],
        rowCount = tbody.rows.length,
        colCount = thead.rows[0].cells.length,
        maxvalues = new Array( colCount ),
        maxCells = new Array( colCount ),
        i = rowCount - 1,
        j = colCount - 1,
        cell, value;

    // Loops through rows/columns to get col ceilings
    for ( ; i > -1 ; i-- ) {

        for ( ; j > -1 ; j-- ) {

            cell = tbody.rows[ i ].cells[ j ];
            value = parseFloat( cell.innerHTML );

            if ( value.toString() === "NaN" ) continue;

            if ( value > ( maxvalues[ j ] === undefined ? -1 : maxvalues[ j ] ) ) {
                maxvalues[ j ] =  value;
                maxCells[ j ] = i + "," + j;
            }

        }

        j = colCount - 1;

    }

    // Set classes
    for ( ; j > -1 ; j-- ) {
        tbody.rows[ maxCells[ j ].split( "," )[ 0 ] ]
             .cells[ maxCells[ j ].split( "," )[ 1 ] ]
             .setAttribute( "class", "max" );
    }

}

var table = document.getElementById( 'mytable' );
markColumnCeilings( table );

CSS

td.max { font-weight: bold; }

Fiddle: http://jsfiddle/kboucher/cH8Ya/

I have modified the function of @sbonkosky to be able to manage various tables. In my case I have various tables and it was mixing values of all them.

function GetLargestValueForColumn(table) {
        let colCount = $('table:eq('+ table +') th').length;
        let rowCount = $('table:eq('+ table +') tbody tr').length;
        let largestVals = new Array();

        for (let c = 0; c < colCount; c++) {
            let values = new Array();
            for (let r = 0; r < rowCount; r++) {
                let value = $('table:eq('+ table +') tbody tr:eq(' + r + ') td:eq(' + c + ')').text();
                value = value.replace("%", "").replace("kg", "").replace(" ", "").replace(".", "");
                values.push(value);
            }
            let largest = Math.max.apply(Math, values);
            largestVals.push(largest);

            $('tbody tr').each(function() {
                let text = $(this).find('td:eq(' + c + ')').text();
                text = text.replace("%", "").replace("kg", "").replace(" ", "").replace(".", "");
                if (text == largest) {
                    $(this).find('td:eq(' + c + ')').addClass("max");
                }
            });
        }
    return
}
$(function() {
    $('table').each(function(table) {GetLargestValueForColumn(table)});
})