How to use Jquery to dynamically alter cell backgrounds in a table based on their values?

Question

How to use Jquery to dynamically alter cell backgrounds in a table based on their values?

I successfully imported the table from MySQL to HTML, as shown below:

https://i.sstatic.net/kzJtF.png

My script is designed to highlight the two lowest and two highest values in each column:

    $(document).ready(function(){

var $table = $("#tbTodos");
  $table.find("th").each(function(columnIndex)
 {
var oldValue=0, currentValue=0;
var $trs = $table.find("tr");
var highElements = [];
var highElements2 = [];
var lowElements = [];
var lowElements2 = [];
var lowestValue = 999999;
var lowestValue2 = 999999;
var highestValue = 0;
var highestValue2 = 0;


$trs.each(function(index, element)
{
    oldValue= currentValue;
    var cell = $(this).find("td:eq("+ columnIndex +")");

    if (cell.length!=0) 
    {
        currentValue= parseInt(cell.html());
        if(currentValue < lowestValue)
        {
            if(currentValue < lowestValue2)
        {
                lowestValue2 = lowestValue;
                lowElements2 =lowElements.pop();
                //lowElements2.push((cell));
            }

            lowestValue = currentValue;
           // lowElements = [];
            lowElements.push(cell);
        }
        else if (currentValue == lowestValue) {
            lowElements.push(cell);
        }


        if (currentValue > highestValue)
        {
            highestValue2 = highestValue;
            highElements2 = highElements.pop();
         //   highElements2.push(highElements.push(cell));

            highestValue = currentValue;
      //      highElements = [];
            highElements.push(cell);
        }
        else if (currentValue == highestValue) {
            highElements.push(cell);
        }
    }
});


$.each(lowElements2, function(i, e){
    $(e).addClass('highest2');
});

 $.each(lowElements, function(i, e){
    $(e).removeClass('highest2').addClass('highest');
});

$.each(highElements2, function(i, e){
    $(e).addClass('lowest2');
});

 $.each(highElements, function(i, e){
    $(e).removeClass('lowest2').addClass('lowest');
   });

  });
});

CSS stylings:

    .highest{
      background-color:#ff4040;
        }
    .highest2{
    background-color:#f07878;
}
    .lowest{
    background-color:#66cc47;
}
    .lowest2{
    background-color:#aee59d ;
}

The highlighting for the first highest and lowest values in each column works correctly. However, there are discrepancies with the second highest and lowest values in some columns, such as 7 and 8. Additionally, the first column lacks a second-highest number.

View this on fiddle: https://jsfiddle.net/kaee715m/

jquery css html-table cell highlight

Answer 1

Answer №1

const $table = $("#tbTodos");
$table.find("th").each(function(columnIndex){

    const values = [];

    const $tds = $table.find("td").filter(function(){
        return $(this).index() === columnIndex;
    });

    $tds.each(function(index, el){
        const val = parseInt($.trim($(el).text()));
        values.push(val);
    });

    values.sort((a, b) => {return b-a});

    $tds.each(function(index, el){
        const val = parseInt($.trim($(el).text())),
            cls,
            vl = values.length;

        if(val === values[vl-1])            cls = 'highest';
        else if(val === values[0])          cls = 'lowest';

        if(vl > 3 && val === values[vl-2])  cls = 'highest2';
        if(vl > 3 && val === values[1])     cls = 'lowest2';

        $(el).addClass(cls);
    });
});

Answer 2

const $table = $("#tbTodos");
$table.find("th").each(function(columnIndex){

    const values = [];

    const $tds = $table.find("td").filter(function(){
        return $(this).index() === columnIndex;
    });

    $tds.each(function(index, el){
        const val = parseInt($.trim($(el).text()));
        values.push(val);
    });

    values.sort((a, b) => {return b-a});

    $tds.each(function(index, el){
        const val = parseInt($.trim($(el).text())),
            cls,
            vl = values.length;

        if(val === values[vl-1])            cls = 'highest';
        else if(val === values[0])          cls = 'lowest';

        if(vl > 3 && val === values[vl-2])  cls = 'highest2';
        if(vl > 3 && val === values[1])     cls = 'lowest2';

        $(el).addClass(cls);
    });
});

Answer 3

Answer №2

Here is a straightforward method that involves creating a new array of columns, each containing a jQuery object for every cell in the column. This array is then iterated through to sort each column sub-array. This makes it simple to assign classes based on their position in the array.

As the sorting process occurs outside the DOM, it does not impact the actual element positions within the DOM structure.

var cols = []
// Populate cols arrays
$('tr:gt(0)').each(function(){  
  $(this).children().each(function(i){
     if(!cols[i]){
         cols[i]=[];
     }
     cols[i].push($(this));
  })
})

// Loop through columns
$.each(cols, function(_, cells){
   var len = cells.length;
   
   // Sort each column array
   cells.sort(function($a,$b){
     return (+$a.text()) - (+$b.text())
  });
  
  // Add classes based on position in sorted array
  cells[0].addClass('lowest');
  cells[1].addClass('lowest2');
  cells[len-1].addClass('highest')
  cells[len-2].addClass('highest2')
})

Please note that this method assumes all cells contain a numerical value.

DEMO

Answer 4

Here is a straightforward method that involves creating a new array of columns, each containing a jQuery object for every cell in the column. This array is then iterated through to sort each column sub-array. This makes it simple to assign classes based on their position in the array.

As the sorting process occurs outside the DOM, it does not impact the actual element positions within the DOM structure.

var cols = []
// Populate cols arrays
$('tr:gt(0)').each(function(){  
  $(this).children().each(function(i){
     if(!cols[i]){
         cols[i]=[];
     }
     cols[i].push($(this));
  })
})

// Loop through columns
$.each(cols, function(_, cells){
   var len = cells.length;
   
   // Sort each column array
   cells.sort(function($a,$b){
     return (+$a.text()) - (+$b.text())
  });
  
  // Add classes based on position in sorted array
  cells[0].addClass('lowest');
  cells[1].addClass('lowest2');
  cells[len-1].addClass('highest')
  cells[len-2].addClass('highest2')
})

Please note that this method assumes all cells contain a numerical value.

DEMO

How to use Jquery to dynamically alter cell backgrounds in a table based on their values?

Answer №1

Answer №2

Similar questions

Combining two HTML tables in PHP: A step-by-step guide

Enhance your Magento store with a personalized layout update

Generate a series of rotations ranging from -60 to 60 using d3.cloud

jQuery slider triggering a function with a consistent delay of 1 until the handle is released

What is the best way to conceal text while retaining icons on a compact screen?

Display the contents in a textarea with modal, not as a string

Tips for adjusting the width of a table

Incorporate the list seamlessly into the remaining content of the page

"Enhance your database by incorporating HTML link clicks through AJAX integration with PHP and MySQL

Avoid multiple delays when clicking the identifier

The file upload issue with FormData append in CodeIgniter is causing errors

What is the correct way to create a template form in Django given the structure of my views.py file?

The outcome of the WCF Web Service shows an error of Unexpected Token Illegal - ParserError when using Chrome or IE9, but works fine

Leveraging the Scroll feature in Bootstrap for smooth scrolling

Using jQuery to send a post request to a servlet and then refreshing the parent

Sorting functionality in Dyntable is not functioning properly when called from an Ajax request

How can I use JavaScript or CSS to identify the specific line on which certain words appear in the client's browser?

How can I simplify the CSS properties for this border?

on clicking GTM, obtain a different child element

Tips for retrieving form data using $_POST from the same page after submission via $.ajax