Conditional Color Coding of Table Cells

[DanB]

Hello, fellow analytics enthusiasts.  I have a widget script that color codes table (not pivot) cells based on their values.  This code works, but only on the first page of table results.  If I switch to page 2, 3, 4 and so-on of the table, the results are not colored.  I'm guessing this is because the results don't render until their page is brought into view.  What approach can I use to achieve this same result but for all values on all pages of the table?

Thanks in advance!

widget.on('domready', function () {

// conditionally color values in the 10th column of the table

$("tr td:nth-child(10)").css('backgroundColor',''); // reset the color 
$("tr td:nth-child(10)").each(function() {

  if(parseInt($(this).html()) <= 14) {
    $(this).css('backgroundColor','red');
   }
   if(parseInt($(this).html()) > 14 && parseInt($(this).html()) < 30) {
    $(this).css('backgroundColor','yellow');
   }
   if(parseInt($(this).html()) > 30) {
    $(this).css('backgroundColor','green');
   }
  });

});

[harikm007 · Accepted solution]

@DanB ,

One method is to use 'MutationObserver'

Please try this :

widget.on('ready', function(se, ev) {
	//Observer
	const elementToObserve = $('.dataTables_scroll .dataTables_scrollBody table tbody', element)[0];
	const observer = new MutationObserver(function(e) {
		for(const m of e) {
			if (m.type === 'childList') {
				$("tr td:nth-child(4)").css('backgroundColor',''); // reset the color 
				$("tr td:nth-child(4)").each(function() {

				  if(parseInt($(this).html()) <= 14) {
					$(this).css('backgroundColor','red');
				   }
				   if(parseInt($(this).html()) > 14 && parseInt($(this).html()) < 30) {
					$(this).css('backgroundColor','yellow');
				   }
				   if(parseInt($(this).html()) > 30) {
					$(this).css('backgroundColor','green');
				   }
				 });
			}
		}
	});
	observer.observe(elementToObserve, {subtree: true, childList: true});
})

-Hari

[DanB]

@harikm007 - Thank you so much!  This worked perfectly, and I think this is my new favorite Javascript construct!  This is so handy to know.  All the best!