每个tr中的Javascript最高编号,跳过3列

时间:2013-07-31 18:06:01

标签: javascript jquery

我有一个表,它会在每个tr中为最高编号添加一个类。

我希望它跳过前3列而不是搜索它们。然后,如果有多个最高,那么也是粗体。

我会在这里粘贴代码以及小提琴。

HTML

    <style>
        .highest {
        font-weight: bold;
    }
    </style>

<table width="300">
    <tr>
        <th>no</th>
        <th>no</th>
        <th>no</th>
        <th>yes</th>
        <th>yes</th>
        <th>yes</th>
    </tr>    
    <tr>
        <td>150</td>
        <td>name</td>
        <td>10.5</td>
        <td>1.5</td>
        <td>12</td>
        <td>9.3</td>
    </tr>
    <tr>
        <td>12.0</td>
        <td>name</td>
        <td>150</td>
        <td>150</td>
        <td>13.5</td>
        <td>150</td>
    </tr>
    <tr>
        <td>160</td>
        <td>name</td>
        <td>115</td>
        <td>15</td>
        <td>11</td>
        <td>160</td>
    </tr>
    <tr>
        <td>145</td>
        <td>name</td>
        <td>151</td>
        <td>12</td>
        <td>18</td>
        <td>18</td>
    </tr>
</table>

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();
        if (!isNaN(value)) {
            return value;
        }
    }).addClass('highest');
});

FIDDLE

http://jsfiddle.net/65S7N/96/

3 个答案:

答案 0 :(得分:4)

只需将选择器作为参数添加到插件中,然后按以下步骤进行过滤:

jQuery(function($) {
    $.fn.max = function(selector) {
        var elems = $();
        this.each(function() {
            var max = 0,
                ele = $(this).find(selector).each(function(i,el) {
                var n  = parseFloat($(el).text());
                if ( n > max ) max = n;
            }).filter(function() {
                return parseFloat($(this).text()) === max;
            });
            elems = elems.add(ele);
        });
        return elems;
    };
}(jQuery));


$('tr').max('td:gt(2)').addClass('highest');

FIDDLE

答案 1 :(得分:0)

要跳过前3列,请使用:

$(this).children('td').filter(function(i) {
    return i > 2;
}).max(...)

过滤函数接收集合中元素的从零开始的位置。

如果要突出显示具有最大值的多个条目,maxIndex需要是一个数组,而不是一个值。当value === max时,将当前索引推送到数组。或者将它作为元素的jQuery集合而不是索引,并将当前元素添加到它。

答案 2 :(得分:0)

$('tr').each(function(){
    var this = $(this);
    var max = -Infinity;
    var indexes = [];
    this.find('td:gt(2)').each(function(index){
        var this_num = ($(this).text() >> 0);
        if ( max < this_num ) {
            max = this_num;
            indexes = [index];
        } else if (max == this_num ) {
            indexes.push(this_num);
        }
    });
    $(indexes).each(function(index){
        this.find('td:eq('+index+')').addClass('highest');
    });
});

应该工作..尚未测试:|