jquery - Highlight table rows that have max value in a specific cell

Question

I have a table (#tbl_maxmark) like this:

The fist cell(td) of each row is an itemcode which may repeat over rows. I need to highlight one row for each itemcode which has highest value in third cell. This is what I tried:

var key,temp;

$('#tbl_maxmark').find('tr').each(function(){

    key=$(this).find('td').eq(0).html();
    temp=$(this).find('td').eq(2).html();
    
    $('#tbl_maxmark tr').each(function(){
      
      if($(this).find('td').eq(0).html() == key){
        
        if(parseINT($(this).find('td').eq(2).html()) > temp){
            $(this).addClass('highlight');
        }           
      }
          
    })
        

})

question from:https://stackoverflow.com/questions/65924801/highlight-table-rows-that-have-max-value-in-a-specific-cell

Answer 1

Here is a working suggestion.

First, it uses an .each() loop over the table rows to get the highest "mark" for each "paper" and store it in an object.

Second, a for in loop cycles all the different paper/mark pairs to loop again all rows and add the highlight class at the right place.

Look for the comments below... Ignore the first part which only was to recreate your table.

let data = [ { col1: "LBA103", col2: "something like a description", col3: "17", col4: "10", col5: "27", col6: "0", col7: "Fail", col8: "4/2013" }, { col1: "LBA105", col2: "something like a description", col3: "21", col4: "18", col5: "39", col6: "0", col7: "Fail", col8: "4/2013" }, { col1: "LBA106", col2: "something like a description", col3: "25", col4: "16", col5: "41", col6: "0", col7: "Fail", col8: "4/2013" }, { col1: "LBA103", col2: "something like a description", col3: "A", col4: "10", col5: "10", col6: "0", col7: "Fail", col8: "6/2014" }, { col1: "LBA105", col2: "something like a description", col3: "A", col4: "18", col5: "18", col6: "0", col7: "Fail", col8: "6/2014" }, { col1: "LBA106", col2: "something like a description", col3: "A", col4: "16", col5: "16", col6: "0", col7: "Fail", col8: "6/2014" }, { col1: "LBA103", col2: "something like a description", col3: "31", col4: "10", col5: "41", col6: "0", col7: "Fail", col8: "4/2015" }, { col1: "LBA105", col2: "something like a description", col3: "A", col4: "18", col5: "18", col6: "0", col7: "Fail", col8: "4/2015" }, { col1: "LBA106", col2: "something like a description", col3: "26", col4: "16", col5: "42", col6: "0", col7: "Fail", col8: "4/2015" }, { col1: "LBA103", col2: "something like a description", col3: "21", col4: "10", col5: "31", col6: "0", col7: "Fail", col8: "4/2016" }, { col1: "LBA106", col2: "something like a description", col3: "26", col4: "16", col5: "42", col6: "0", col7: "Fail", col8: "4/2016" }, { col1: "LBA106", col2: "something like a description", col3: "24", col4: "16", col5: "40", col6: "0", col7: "Fail", col8: "4/2017" }, { col1: "LBA203", col2: "something like a description", col3: "11", col4: "18", col5: "29", col6: "0", col7: "Fail", col8: "12/2013" }, { col1: "LBA206", col2: "something like a description", col3: "23", col4: "14", col5: "37", col6: "0", col7: "Fail", col8: "12/2013" }, { col1: "LBA203", col2: "something like a description", col3: "A", col4: "18", col5: "18", col6: "0", col7: "Fail", col8: "11/2014" } ]
data.forEach(function(item) {$("#tbl_maxmark").append($(`<tr><td>${item.col1}</td><td>${item.col2}</td><td>${item.col3}</td><td>${item.col4}</td><td>${item.col5}</td><td>${item.col6}</td><td>${item.col7}</td><td>${item.col8}</td></tr>`))})

// ============================================= Forget about the above... ;)

// An object to find the highest marks
let highestMarks = {}

// Loop through the table rows
$("#tbl_maxmark tr").each(function(index, row) {
  let paper = $(row).find("td").eq(0).text()
  let mark = parseInt($(row).find("td").eq(2).text()) || 0

  let currentValue = highestMarks[paper] || 0
  
  // Store the mark if higher than wht is already stored
  highestMarks[paper] = (currentValue < mark) ? mark : currentValue
})

console.log("Highest marks:")
console.log(highestMarks)

// For every highest mark
for (mark in highestMarks) {

  // Loop all rows again to add the class
  $("#tbl_maxmark tr").each(function(index, row) {
    if ($(row).find("td").eq(0).text() === mark && parseInt($(row).find("td").eq(2).text()) === highestMarks[mark]) {
      $(row).find("td").eq(2).addClass("highlight")
    }
  })
}

table {
  border-collapse: collapse;
}

td {
  border: 1px solid grey;
  padding: 0.3em;
}

.highlight {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl_maxmark"></table>