突出显示在特定单元格中具有最大值的表格行

Question

我有一个像这样的表（#tbl_maxmark）：

每行的第一个单元格（td）是一个项目代码，可以在行上重复。 我需要为第三个单元格中具有最高值的每个项目代码突出显示一行。 这是我尝试过的：

变量键，温度；

$('#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');
        }           
      }
          
    })
        

})

Answer 1

这是一个工作建议。

首先，它在表格行上使用.each()循环来获取每个“论文”的最高“标记”，并将其存储在 object 中。

其次， for in循环循环所有不同的纸张/标记对以再次循环所有行并在正确的位置添加highlight class。

寻找下面的评论......忽略第一部分，它只是重新创建你的表。

 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>

请注意，“LBA106”被突出显示两次，因为标记都是最高的。