Conditional table cell background color depending on value

Question

I have a HTML table that I'm trying to change the cell background color to red depending on the value of the cell. Each cell will have a different threshold for when red is needed (one cell might be > 5, another > 10). The cells are sporadic throughout the table, and none are related to the other. Further, jquery is used to pull the value in from a value stored in a SharePoint list. Is there some way to check the value when it's pulled from the list and change the color before it's inserted in the table? Not sure what the best approach is for this. Thanks in advance for any help offered!

Table row code:

<tr>
  <td colspan="3" style="width:30%; background-color:#015A78; color:White; text-align:center; 
  font-size:20pt; font-weight:bold; border-width:thick; border-style:inset"><div 
  id="subjectivehoverMouseover" title="">Subjective</div></td>

  <td style="background-color:Black; color:White; text-align:center; font-weight:bold; border- 
  style:inset"><div id="SubjectiveDays"></div></td>
  <td></td>

 </tr>

And the jquery to pull in the value for SubjectiveDays in the last cell above:

 if (listItem.Title === "subjectivegrading") {
           $("#SubjectiveDays").text(listItem.c3t9 + " Business Days");
        }

This is just one cell/id in the table. The 'c3t9' value will change. Depending on the user input on a different SP page, the value in the list will change. Then that value from the list is being pulled into a single cell in a table.

Answer 1

Not sure about the exact requirements. However, the following script will retrieve items from a list and based on values will dynamically change style of cells/rows and then append to an existing HTML table.

For this sample, script editor web-part added to a list view page in SPO classic mode. This can be further enhanced as per needs.

<div>

<table style="width:50%" cellpadding = "5" cellspacing = "5" id="StudentScores">

  <tr>
    <th style="text-align:center;font-size:20pt;font-weight:bold;background-color:#ADD8E6;">Student</th>
    <th style="text-align:center;font-size:20pt;font-weight:bold;background-color:#ADD8E6;">Exam1</th> 
    <th style="text-align:center;font-size:20pt;font-weight:bold;background-color:#ADD8E6;">Exam2</th>
    <th style="text-align:center;font-size:20pt;font-weight:bold;background-color:#ADD8E6;">Exam3</th> 
    <th style="text-align:center;font-size:20pt;font-weight:bold;background-color:#ADD8E6;">Exam4</th>
  </tr>  
  
</table>

</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script language="javascript" type="text/javascript">


 //when document is ready
 $( document ).ready(function() {

     DynamicTable();

  });  


//URL of the list to be replaced
var url= _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('ExamScores')/items";


function DynamicTable() {

       $.ajax({
            url: url,  
            method: "GET",  
            headers: {  
                "Accept": "application/json; odata=verbose"  
            },

            success: function(data){
               
            data.d.results.forEach(function(item){              
            
            //alert("Student.." + item.Title + " " + item.Exam1 + " " + item.Exam2 + " " + item.Exam3 + " " + item.Exam4);

               var row= appendTableRow(item);
               
               //append the formatted row to the table
 
               $("#StudentScores").append(row);          
                         

            });    

                
            },
            error: function(error){
                   // error handler code goes here
              alert("Error Retrieving Data");
            }
        });    

}


function appendTableRow(item)
{
  //dynamically generate row (tr) for the table
     
  var row="<tr style=\"width:50%\">";
  var td= "<td style=\"text-align:center;font-size:15pt; font-weight:bold;\">" + item.Title + "</td>";
  td=td + "<td style=\"text-align:center;font-size:15pt; font-weight:bold;background-color:" +  getColor(item.Exam1) + "\">" + item.Exam1 + "</td>";
  td=td + "<td style=\"text-align:center;font-size:15pt; font-weight:bold;background-color:" +  getColor(item.Exam2) + "\">" + item.Exam2 + "</td>";
  td=td + "<td style=\"text-align:center;font-size:15pt; font-weight:bold;background-color:" +  getColor(item.Exam3) + "\">" + item.Exam3 + "</td>";
  td=td + "<td style=\"text-align:center;font-size:15pt; font-weight:bold;background-color:" +  getColor(item.Exam4) + "\">" + item.Exam4 + "</td>";

  row=row+td + "</tr>";

  //alert(row);

  return row; 
 


}

function getColor(score)
{
 
   var background="white";

   if(score<5)
    {
      background="red";
    }
    else if(score>=5 && score<8)
    {

    background="yellow";
    }
    else
    {
      background="green";
    }


   return background;   

}

</script>

Let me know if you have any questions.