Search code examples
jquerycsshtml-tablecellhighlight

Change background of cell in table depending on his value with Jquery?

I have the table, below, loaded from MySQL into HTML:

I have this script that highlights the two lowest, and two highest, of each column:

    $(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 ;
}

The first highest, and the first lowest, mark in each column are okay, but the second values for highest and lowest are wrong in some columns, like 7 and 8; and in the first column there's no second-highest number.

fiddle https://jsfiddle.net/kaee715m/

Solution 
  • 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);
    });
});