Jquery DataTables,根据值突出显示单元格

时间:2014-08-15 20:02:27

标签: javascript jquery

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

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

在上面的例子中,在行1,54和12中,在第2行,92和40应该突出显示(background-color / class)。我正在尝试模仿Excel的条件格式。

有关如何解决问题的任何想法?

2 个答案:

答案 0 :(得分:0)

也许您可以使用这两个函数在表格的行中导航,然后循环播放所有的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 
}

答案 1 :(得分:0)

如果你在Arrays中检索或创建这些行,那么你可以执行以下操作:

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