Изменить фон строки на основе возвращаемых значений Ajax с помощью Tablesorter js - PullRequest
Новая
       14

Изменить фон строки на основе возвращаемых значений Ajax с помощью Tablesorter js

0 голосов
/ 15 октября 2018

У меня есть таблица из десятка или около того на странице, которая перезагружается при каждом нажатии следующей или предыдущей кнопки.Мне нужно иметь возможность изменить фон строки на основе значения переменной.так вот мой 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, как показано ниже, она прекрасно работает, но когда я нажимаю следующую или предыдущую кнопку, потому что она не перезагружает экранпросто обновляет таблицы, затем я получаю сообщение об ошибке, я хотел бы не использовать функцию обработки данных, так как она вызывает слишком много ошибок 

  $('#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 голосов
/ 15 октября 2018

При создании 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>'
);
...