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

时间:2018-10-15 16:40:10

标签: javascript jquery html css tablesorter

我有一个表格,该表格是页面上大约十几个表格之一,每次按下下一个或上一个按钮时都会重新加载。我需要能够基于变量值更改行的背景。所以这是我的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>

如果我在下面使用带有js的内置数据表功能,则效果很好,但是当我按下下一个按钮或上一个按钮时,因为它不重新加载屏幕,只是更新了表格,那么我得到一个错误,我想不使用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');
      }
     
    }
  } );

1 个答案:

答案 0 :(得分:1)

在构建HTML时,请包含表格单元格的背景色。像这样:

SELECT  U.USER_ID, U.OFFICE_FK, U.LOCKER, U.SOCIAL_CARD, U.EMAIL, 
        U.FULL_NAME, U.SURNAME1, U.SURNAME2, U.BIRTHDATE, U.PREFERENCES
INTO    SEL_USER 
FROM    APP.USER AS U
WHERE   ...;