代码之家 › 专栏 › 技术社区 › ForgivenIT

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

tablesorter css html jquery javascript

ForgivenIT · 技术社区 · 7 年前

我有一个表格,它是一个页面上十几个表格中的一个,每当按下下一个或上一个按钮时,它就会重新加载。我需要能够根据变量值更改行的背景。这是我的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');
      }
     
    }
  } );

1 回复 | 直到 7 年前

Mottie 7 年前

在构建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>'
);

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前