根据 Jquery 的值更改表格中单元格的背景？答案

【问题标题】：Change background of cell in table depending on his value with Jquery?根据 Jquery 的值更改表格中单元格的背景？
【发布时间】：2017-06-02 05:03:59
【问题描述】：

下面的表格是从 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；并且在第一列中没有第二高的数字。

小提琴 https://jsfiddle.net/kaee715m/

【问题讨论】：

你能在jsfiddle.net上提供一个演示吗？
请包含相关的HTML、CSS；提供您代码的“minimal reproducible example”sn-p，以便我们可以轻松重现您的问题并提供解决方案。如果您让我们能够轻松地为您提供帮助，您可能会得到更好、更具体、更实用的问题答案。
这里是jsfiddle.net/kaee715m

标签： jquery css html-table cell highlight

【解决方案1】：

这是一种更简单的方法，它创建一个新的列数组，其中包含每个列中每个单元格的 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

【讨论】：

你应该把(+$a.text()) - (+$b.text())改成(+$b.text()) - (+$a.text())。
@Damon.s 为什么？应用了正确的类并且顺序正确
是的，你是对的。 highest 类是 red background。问题就在这里。

【解决方案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);
    });
});

【讨论】：