根据 Jquery 的值更改 table 中单元格的背景？

Question

我有下面的 table，从 MySQL 加载到 HTML:

我有这个脚本，突出显示每列中的两个最低值和两个最高值：

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

每一列的第一高分和最低分是可以的，但是有些列的最高分和最低分是错误的，比如7和8；在第一列中没有第二高的数字。

fiddle https://jsfiddle.net/kaee715m/

Answer 1

这是一个更简单的方法，它创建一个新的列数组，其中包含每个列中每个单元格的 jQuery 对象，然后遍历该数组并对每个列 sub-array 进行排序。然后很容易根据数组中的位置添加class

由于排序是在 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

Answer 2

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

根据 Jquery 的值更改 table 中单元格的背景？

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

css

jquery

html-table

highlight

cell