If <td> has the largest int, in its <tr> add css class to <td> - jquery

css, html, javascript, jquery

Solution

First bash - shorter (and potentially more efficient) answers may be available...

$('tr').each(function() {
    var $td = $(this).children();

    // find all the values
    var vals = $td.map(function() {
        return +$(this).text();
    }).get();

    // then find their maximum
    var max = Math.max.apply(Math, vals);

    // tag any cell matching the max value
    $td.filter(function() {
        return +$(this).text() === max;
    }).addClass('highest');
});

demo at http://jsfiddle.net/alnitak/DggUN/

Problem

Ive got a table of data, and I'm trying to at a glance look over it and find the highest number on each row. To do this I'm adding a css class called highest to the highest `<td>` like this ``` <tr> <td>4.2</td> <td class="highest">5.0</td> <td>2.9</td> </tr> ``` with this css ``` td.highest {font-weight:bold;} ``` But this is all hardcoded, I'm trying to work out how to write this using jquery, but I'm pretty new to js and not really sure were to start, I was looking at using `Math.max` but as I can tell thats to be used on arrays, rather that reading html, any ideas ? I've made a jsfiddle here - http://jsfiddle.net/pudle/vEUUQ/

Original source