0

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.

0

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>


enter image description here

Let me know if you have any questions.

1
  • wow! This is a lot different than I have all of my coding set up, but in a good way! This looks much more simplistic and better format. I will try this out, thank you!
    – mehumphry
    Nov 3 '20 at 17:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.