Jqueryで彼の値に応じてテーブルのセルの背景を変更しますか？

Question

私はテーブル、以下、HTMLへのMySQLからロードされています：

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

I持って、各列の、2つの最低、および2つの最高を強調し、このスクリプト：

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

各列の最も高い第一、及び第最小マークは大丈夫ですが、HIGための第二の値7と8のようないくつかの列では、hestとlowestが間違っています。最初の列には2番目に高い数字はありません。

フィドル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オブジェクトを含む配列をループし、各列のサブ配列をソートし、新しい列の配列を作成簡単な方法です。そして、それはソートが、これはすべての細胞が含まれていることを前提としてDOM

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') 
}) 

注実際の要素の位置には影響を与えませんDOM外で行われるため、アレイ

内の位置に基づいてクラスを追加するのは簡単です数

DEMO