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

Question

I have a table that is one of a dozen or so on a page that reloads every time a next or previous button is pressed. I need to be able to change the background of a row based on a variable value. so here is my html, and js (the css is controled by the tablesorter plugin, but i have overwriten it with basic js to change the entire background but cant get to change just the rows i want

$("#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>

if i use the datatable built in function with js as below it works great but when i hit the next button or previous button because it does not reload the screen just updates the tables then i get an error, i would like to not use the datatable function as it causes too many errors

  $('#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

While you're building the HTML, include the table cell background color. Something like this:

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