Jquery DataTables，根据值突出显示单元格[重复]答案

【问题标题】：Jquery DataTables, highlight cell based on value [duplicate]Jquery DataTables，根据值突出显示单元格[重复]
【发布时间】：2014-08-15 20:02:27
【问题描述】：

我正在尝试使用 DataTables 来显示从带有 ajax 的数据库中提取的值矩阵。现在我想突出显示 每一行 中具有最高值的单元格：

10 | 12 | 54 | 1
4  | 92 | 11 | 40
9  | 12 | 99 | 98

在上面的示例中，在第 1、54 和 12 行中，在第 2 行中，应突出显示第 92 和 40 行（背景颜色/类）。我正在尝试模仿 Excel 的条件格式。

关于如何解决这个问题的任何想法？

【问题讨论】：

如果值是“静态”并且您正在使用 PHP 生成页面，也许您可以在服务器端进行处理并将某个类应用于您想要突出显示的单元格？跨度>
这是一个想法，但我的计划是动态地使其能够打开/关闭、更改以突出显示最低等...并且数据作为 json-objects 检索。
您可以使用 fnRowCallback 循环每一行并执行类似 http://stackoverflow.com/a/21902642/2359055 的操作

标签： javascript jquery

【解决方案1】：

也许您可以使用这两个函数在 Table 的行中导航，然后循环查找所有 TD？

它们直接扩展了 DataTable 插件并且非常易于使用。他们也可以处理过滤表。

功能：

$.fn.dataTableExt.oApi.fnGetFilteredNodes = function ( oSettings )
{
        var anRows = [];
        for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
        {
                var nRow = oSettings.aoData[ oSettings.aiDisplay[i] ].nTr;
                anRows.push( nRow );
        }
        return anRows;
};

$.fn.dataTableExt.oApi.fnGetTds  = function ( oSettings, mTr )
{
    var anTds = [];
    var anVisibleTds = [];
    var iCorrector = 0;
    var nTd, iColumn, iColumns;

    /* Take either a TR node or aoData index as the mTr property */
    var iRow = (typeof mTr == 'object') ?
        oSettings.oApi._fnNodeToDataIndex(oSettings, mTr) : mTr;
    var nTr = oSettings.aoData[iRow].nTr;

    /* Get an array of the visible TD elements */
    for ( iColumn=0, iColumns=nTr.childNodes.length ; iColumn<iColumns ; iColumn++ )
    {
        nTd = nTr.childNodes[iColumn];
        if ( nTd.nodeName.toUpperCase() == "TD" )
        {
            anVisibleTds.push( nTd );
        }
    }

    /* Construct and array of the combined elements */
    for ( iColumn=0, iColumns=oSettings.aoColumns.length ; iColumn<iColumns ; iColumn++ )
    {
        if ( oSettings.aoColumns[iColumn].bVisible )
        {
            anTds.push( anVisibleTds[iColumn-iCorrector] );
        }
        else
        {
            anTds.push( oSettings.aoData[iRow]._anHidden[iColumn] );
            iCorrector++;
        }
    }

    return anTds;
};

用途：

var nHidden=oTable.fnGetFilteredNodes();// Get filtered nodes
for(var i=0; i<nHidden.length; i++){
    $(oTable.fnGetTds(nHidden[i], 0)[0]) //etc... process TD's values 
}

【讨论】：

【解决方案2】：

如果您检索这些行或将这些行放入数组中，那么您可以执行以下操作：

$.post('wherever.php', function(r){
  var eachRow = [];
  $.each(r, function(){
    eachRow.push(r.sort(function(a, b){return b-a;}).slice(-2));
  });
  $('#table tr').each(function(i, e){
    if($.inArray($(e).text(), eachRow[i])){
      $(e).addClass('highlight');
      // have .highlight{border:#ff0 solid 1px;} or whatever in CSS
    }
  });
});

【讨论】：