Jquery - 多次将类应用于最高值

时间:2011-07-28 14:23:46

标签: jquery highlight

我有以下表结构,结果来自两个单独的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 个答案:

答案 0 :(得分:2)

假设您有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

答案 1 :(得分:0)

你可以做(​​但我认为可以做得更好):

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/