根據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 ; 
} 

每列中的第一個最高和第一個最低標記都可以，但第二個值爲hig hest和最低的在一些欄目中是錯誤的，如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對象中的每一列然後通過數組循環和排序列各子陣列更簡單的方法。然後可以很容易地添加基於位置類陣列

由於排序是DOM之外完成的，不影響實際的元素位置在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') 
}) 

注意這個假設所有細胞中含有一種數

DEMO