使用jQuery从表中获取两个最低值

时间:2014-02-20 08:17:26

标签: jquery html-table

我有一张桌子:

<table>
    <tr>
        <th>Name</th>
        <th>Id</th>
        <th>Value</th>
    </tr>
    <tr>
        <td>Ankaran</td>
        <td>101</td>
        <td>91</td>
    </tr>
    <tr>
        <td>Ljubljana</td>
        <td>102</td>
        <td>213</td>
    </tr>
    <tr>
        <td>Celje</td>
        <td>103</td>
        <td>711</td>
    </tr>
    <tr>
        <td>Portorož</td>
        <td>104</td>
        <td>121</td>
    </tr>
</table>

我想从最后一列(“值”)获取两个最低值,并使用这两个值为td标记着色。什么代码可以实现这个?

我试过了:

$(document).ready(function(){
    $("#btnSelect").click(function(e) {
    e.preventDefault();
        var values= new Array();
        $('tr').each(function () {
            var sorted = $(this).find('td:last').html();
            values.push(sorted);
        });
        console.log(values);
    });
});

我得到了最低价值,但就我所知,我不认为这是一个强有力的解决方案

6 个答案:

答案 0 :(得分:4)

首先,检查 Fiddle Demo

考虑一下你的HTML,这是我的css&amp; js解决方案:

<强>的javascript

var tds = $('td.value');
var arr = $.makeArray(tds);
arr.sort(function(a,b){
    return parseInt($(b).text()) - parseInt($(a).text());
});

$(arr[arr.length-2]).addClass('lowest');
$(arr[arr.length-1]).addClass('lowest');

<强> CSS

td.lowest {background-color:lightgreen;}

答案 1 :(得分:2)

var ok = $('table tr td:last-child').map(function () {
    return $(this).text();
}).get().sort(function (x, y) {
    return x - y
});

alert(ok[0] + ' - is the smallest');
alert(ok[1] + ' - is the 2nd smallest');

http://jsfiddle.net/263Ps/

答案 2 :(得分:1)

尝试

var map = {}, array = [];
var $tds = $('table tr').slice(1).find('td:last-child').each(function () {
    var value = +$(this).text();
    if (map[value]) {
        map[value].push(this);
    } else {
        map[value] = [this];
        array.push(value);
    }
})
array.sort(function(a1, a2){
    return a1 - a2;
});
$tds.filter(function () {
    return $.inArray(+$(this).text(), array) < 2;
}).css('color', 'red')

演示:Fiddle

答案 3 :(得分:1)

var values = [],
    tds = $("table tr").find("td:last");

tds.each(function(){ 
    $(this).data("val",$(this).text());
    values.push(parseInt($(this).text()))
})
values.sort(function(x,y){return x > y});
tds.each(function(){
    if($(this).data("val") == values[0] || $(this).data("val") == values[1])
       $(this).css("color","red");
})

值[0]和值[1]分别是最小值和第二小值。

答案 4 :(得分:1)

这应该可以解决问题: -

var values = $('td:last-child').sort(function(a, b) {
   return $(a).text() - $(b).text();
}).slice(0, 2).css('color', 'red').map(function() {
   return $(this).text();
}).get();

因此,请将每个td:last-child按其text()值(从低到高)排序,然后使用slice()获取前两个元素。将css()应用于这些元素,然后使用map()返回text()var values将分配给{{1}}

Here's a fiddle

答案 5 :(得分:0)

好的我会使用speaky的排序功能,然后从Arun的答案中提取.filter函数,或者只是

$(this).attr('style', 'color:red;')

或任何你想要的颜色,以突出细胞, 或者如果你想突出整行,你可以去

$(this).parent().attr('style', 'color:red;')