Jquery - применить класс к наибольшему значению несколько раз - PullRequest
Новая
       0

Jquery - применить класс к наибольшему значению несколько раз

1 голос
/ 28 июля 2011

У меня есть следующая структура таблицы, результаты которой получены в результате двух отдельных запросов php. 

<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>

Я пытаюсь сделать так, чтобы в каждой строке было выделено наибольшее число, извлеченное из базы данных.

Любая помощь приветствуется!

ОБНОВЛЕНИЕ

Я добавил следующий код на страницу, но не могу заставить его работать.Я вижу, что это работает на jsFiddle, но я должен делать что-то не так.Помогите пожалуйста 

<script type="text/javascript" src="http://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>

Ответы [ 2 ]

2 голосов
/ 28 июля 2011

Предполагается, что у вас есть номера в формате x.xx:

Обновление: Возможно, для этого было бы даже лучше создать плагин.Что-то вроде: 

(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('highlight');
});

DEMO

Старый ответ: 

$('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

0 голосов
/ 28 июля 2011

Вы могли бы сделать (но я думаю, что можно сделать гораздо лучше): 

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

});

скрипка здесь: http://jsfiddle.net/nicolapeluchetti/DYUaP/

...