使用 Tablesorter js 根据 Ajax Return 值更改行的背景

Question

我有一个 table，它是页面上的十几个之一，每次按下下一个或上一个按钮时都会重新加载。我需要能够根据变量值更改行的背景。所以这是我的 html 和 js（css 由 tablesorter 插件控制，但我已经用基本的 js 覆盖了它以更改整个背景但不能只是更改我想要的行

$("#inv3").tablesorter({ sortList: [[8,0]] });
....

for(var x=0;x<data.QID.length;x++)
                   
                    if (data.QISBN != null ) {
                                //code
                         $("#inv3").show();
                          $("#inv3").append('<tr><td id=tableQtyApp>'+data.QApQty[x]+'</td><td id=tableDueDate>'+data.QDateDue[x]+'</td><td id=tableGuide>'+data.QGuide[x]+
                                             '</td><td id=tableQtyUpd>'+data.QUpdateQty[x]+'</td><td id=tableQty>'+data.Qqty[x]+'</td><td id=tableMonth>'+data.QMonth[x]+
                                             '</td><td id=tablePrice>'+data.QPrice[x]+'</td><td id=tableSource>'+data.QSource[x]+'</td><td id=tableDate>'+data.QDateQuote[x]+
                                             '</td><td id=tableQID>'+data.QID[x]+'</td></tr>');
                           
                                                  
                         }
                         else if (data.QISBN == null ) {
                               $("#inv3").hide();  
                         }

<table id="inv3" class="tablesorter" style="border: 1px solid black;">
   <caption class="cap">Quotes</caption>
   <thead>
   <tr>
        <th>Q APP</th>
     <th>Due</th>
     <th>Guide</th>
     <th>Qty Up</th>
     <th>Qty</th>
     <th>Month</th>
     <th>Price</th>
     <th>Source</th>
     <th>Date</th>
     <th>ID</th>
     
    
   </tr>
   </thead>
   <tbody>
   </tbody>
  </table>

如果我将数据table 内置函数与 js 一起使用，效果很好，但是当我点击下一个按钮或上一个按钮时，因为它不会重新加载屏幕，只会更新 table然后我得到一个错误，我不想使用 datatable 函数，因为它会导致太多错误

  $('#inv3').dataTable( {
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
      if ( aData[3]==null )
      {
        $('td', nRow).css('background-color', '#FFC0CB' );
      }
      else if ( aData[3] ==0 )
      {
        $('td', nRow).css('background-color', '#FFC0CB');
      }
      else if ( aData[3]-aData[4] <0 )
      {
        $('td', nRow).css('background-color', '#FFC0CB');
      }
     
    }
  } );

Answer 1

在构建 HTML 时，包括 table 单元格背景颜色。像这样：

function getStyle(val) {
  switch (val) {
    case null:
    case <= 0:
      return 'background-color: #FFC0CB';
    default:
      return '';
  }
}

$("#inv3").append('<tr>' +
  '<td id=tableQtyApp style="' + getStyle(data.QApQty[x]) + '">' +
    data.QApQty[x] + ... +
  '</td></tr>'
);

使用 Tablesorter js 根据 Ajax Return 值更改行的背景

Change background of Row based on Ajax Return Values with Tablesorter js

html

javascript

css

jquery

tablesorter