Изменить фон ячейки в таблице в зависимости от его значения с помощью JQuery?

Question

я таблица, ниже, загружается из MySQL в HTML:

http://image.prntscr.com/image/64a288355e584a78bf938bbed2e4b432.png

У меня есть скрипт, который выдвигает на первый план две самые низкие и две самые высокие, из каждой колонки:

$(document).ready(function(){ 

var $table = $("#tbTodos"); 
    $table.find("th").each(function(columnIndex) 
{ 
var oldValue=0, currentValue=0; 
var $trs = $table.find("tr"); 
var highElements = []; 
var highElements2 = []; 
var lowElements = []; 
var lowElements2 = []; 
var lowestValue = 999999; 
var lowestValue2 = 999999; 
var highestValue = 0; 
var highestValue2 = 0; 


$trs.each(function(index, element) 
{ 
    oldValue= currentValue; 
    var cell = $(this).find("td:eq("+ columnIndex +")"); 

    if (cell.length!=0) 
    { 
     currentValue= parseInt(cell.html()); 
     if(currentValue < lowestValue) 
     { 
      if(currentValue < lowestValue2) 
     { 
       lowestValue2 = lowestValue; 
       lowElements2 =lowElements.pop(); 
       //lowElements2.push((cell)); 
      } 

      lowestValue = currentValue; 
      // lowElements = []; 
      lowElements.push(cell); 
     } 
     else if (currentValue == lowestValue) { 
      lowElements.push(cell); 
     } 


     if (currentValue > highestValue) 
     { 
      highestValue2 = highestValue; 
      highElements2 = highElements.pop(); 
     // highElements2.push(highElements.push(cell)); 

      highestValue = currentValue; 
     //  highElements = []; 
      highElements.push(cell); 
     } 
     else if (currentValue == highestValue) { 
      highElements.push(cell); 
     } 
    } 
}); 


$.each(lowElements2, function(i, e){ 
    $(e).addClass('highest2'); 
}); 

$.each(lowElements, function(i, e){ 
    $(e).removeClass('highest2').addClass('highest'); 
}); 

$.each(highElements2, function(i, e){ 
    $(e).addClass('lowest2'); 
}); 

$.each(highElements, function(i, e){ 
    $(e).removeClass('lowest2').addClass('lowest'); 
    }); 

    }); 
}); 

Css :

.highest{ 
     background-color:#ff4040; 
     } 
    .highest2{ 
    background-color:#f07878; 
} 
    .lowest{ 
    background-color:#66cc47; 
} 
    .lowest2{ 
    background-color:#aee59d ; 
} 

Первый по высоте и первый самый низкий знак в каждом столбце в порядке, но вторые значения для hest и low неправильны в некоторых столбцах, например 7 и 8; и в первом столбце нет второго по величине числа.

скрипку https://jsfiddle.net/kaee715m/

Answer 1

var $table = $("#tbTodos"); 
$table.find("th").each(function(columnIndex){ 

    var values = []; 

    var $tds = $table.find("td").filter(function(){ 
     return $(this).index() == columnIndex; 
    }); 

    $tds.each(function(index, el){ 
     var val = parseInt($.trim($(el).text())); 
     values.push(val); 
    }); 

    values.sort(function(a, b){return b-a}); 

    $tds.each(function(index, el){ 
     var val = parseInt($.trim($(el).text())), 
      cls, 
      vl = values.length; 

     if(val == values[vl-1])   cls = 'highest'; 
     else if(val == values[0])   cls = 'lowest'; 

     if(vl > 3 && val == values[vl-2]) cls = 'highest2'; 
     if(vl > 3 && val == values[1])  cls = 'lowest2'; 

     $(el).addClass(cls); 
    }); 
}); 

Answer 2

Вот более простой подход, который создает массив новых столбцов, содержащий объект JQuery для каждой ячейки в каждом столбце, то петли через массив и сортирует каждый столбец вложенного массива. Тогда легко добавить класса, основанный на позиции в массиве

Поскольку сортировка выполняются за пределами йота это не влияет на фактические позиции элемента в йоте

var cols = [] 
// populate cols arrays 
$('tr:gt(0)').each(function(){ 
    $(this).children().each(function(i){ 
    if(!cols[i]){ 
     cols[i]=[]; 
    } 
    cols[i].push($(this)); 
    }) 
}) 

// loop through columns 
$.each(cols, function(_, cells){ 
    var len = cells.length; 
    // sort each column array 
    cells.sort(function($a,$b){ 
    return (+$a.text()) - (+$b.text()) 
    }); 
    // add classes based on position in sorted array 
    cells[0].addClass('lowest'); 
    cells[1].addClass('lowest2'); 
    cells[len-1].addClass('highest') 
    cells[len-2].addClass('highest2') 
}) 

При этом предполагается, что все клетки содержат номер

DEMO