首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >用Tablesorter js改变基于Ajax返回值的行背景

用Tablesorter js改变基于Ajax返回值的行背景
EN

Stack Overflow用户
提问于 2018-10-16 00:40:10
回答 1查看 26关注 0票数 0

我有一个表格,它是页面上十几个表格中的一个,每次按下下一个或上一个按钮时都会重新加载。我需要能够根据变量值更改行的背景。下面是我的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函数,如下所示,它工作得很好,但当我点击next按钮或previous按钮时,因为它没有重新加载屏幕,只是更新表,所以我得到了一个错误,我不想使用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');
      }
     
    }
  } );

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-10-16 03:28:14

在构建HTML时,包括表格单元格的背景颜色。如下所示:

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>'
);
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52821189

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档