Jquery - Apply class to highest value multiple times

I have the following table structure which results come from two seperate php queries.

<tr>
<td>Item 1</td>
<td>&pound;<?=$row1['item_1']?></td>
<td>&pound;<?=$row2['item_1']?></td>
</tr>
<tr>
<td>Item 2</td>
<td>&pound;<?=$row1['item_2']?></td>
<td>&pound;<?=$row2['item_2']?></td>
</tr>
<tr>
<td>Item 3</td>
<td>&pound;<?=$row1['item_3']?></td>
<td>&pound;<?=$row2['item_3']?></td>
</tr>

What I'm trying to do is within each row highlight the highest number pulled from the database.

Any help is appreciated!

UPDATE

I've added the following code to the page but can't for the life of me get it working. I can see it working on jsFiddle but I must be doing something wrong. Help please

<script type="text/javascript" src="h开发者_JAVA百科ttp://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js "></script>
<script type="text/javascript">
jQuery(function($) {
    $.fn.max = function(callback) {
        var max = null,
            maxIndex = null;

        this.each(function() {
            var value = callback.call(this);
            if (+value === value) {
                if (!max || value > max) {
                    max = value;
                    maxIndex = $(this).index();
                }
            }

        });
        return max !== null ? this.eq(maxIndex) : $();
    };
}(jQuery));


$('tr').each(function() {
    $(this).children('td').max(function() {
        var value = +$(this).text().substr(1);
        if (!isNaN(value)) {
            return value;
        }
    }).addClass('red');
});
</script>

Assuming you have numbers of the format x.xx:

Update: I might be even better to create a plugin for that. Something like:

(function($) {
    $.fn.max = function(callback) {
        var max = null,
            maxIndex = null;

        this.each(function() {
            var value = callback.call(this);
            if (+value === value) {
                if (!max || value > max) {
                    max = value;
                    maxIndex = $(this).index();
                }
            }

        });
        return max !== null ? this.eq(maxIndex) : $();
    };
}(jQuery));

Which can then be used as:

$('tr').each(function() {
    $(this).children('td').max(function() {
        var value = +$(this).text().substr(1);
        if (!isNaN(value)) {
            return value;
        }
    }).addClass('highlight');
});

DEMO

Old answer:

$('tr').each(function() {
    var $tds = $(this).children('td'),
        max = null,
        maxIndex = null;

    $tds.each(function() {
        var value = +$(this).text().substr(1);
        if(!isNaN(value)) {
            if(!max || value > max) {
                max = value;
                maxIndex = $(this).index();
            }
        }
    });
    if(maxIndex !== null) {
        $tds.eq(maxIndex).addClass('highlight');
    }
});

DEMO

You could do (but could be done much better i think):

Array.max = function(array) {
    return Math.max.apply(Math, array);
};

Array.keyPosition = function(array, value) {
    for (i = 0; i < array.length; i++) {
        if (array[i] === value) {
            return i;
        }
    }
    return false;
}


$('table tr').each(function() {
    var numbers = [];
    $(this).children('td').each(function(i, el) {
        var number = parseInt($(this).text(), 10);
        if (isNaN(number)){
            number = -1;
        }
        numbers.push(number);
    });
    var max = Array.max(numbers);
    var index = Array.keyPosition(numbers, max);
    $(this).find('td:eq('+index+')').css('background-color', 'yellow');

});

fiddle here: http://jsfiddle.net/nicolapeluchetti/DYUaP/