使用Jquery根据单元格的值更改表中单元格的背景？

我将下表从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');
   });

  });
});

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

拨弄

---

这里有一种更简单的方法，它创建一个新的columns数组，每个列中的每个单元格都包含一个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')
})

注意：假设所有单元格都包含一个数字

---

你能提供一个演示吗？请包括相关的HTML和CSS；提供您的代码的“”片段，以便我们可以轻松地重现您的问题并提供解决方案。如果你能让我们很容易地帮助你，你的问题可能会得到更好、更具体、更实际的答案。在这里，你应该将

（+$a.text（））-（+$b.text（））

更改为

（+$b.text（））-（+$a.text（））

@Damon。这是为什么？应用了正确的类，顺序正确是的，您是对的。

最高的

等级是

红色背景

。问题就在这里。

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

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