HTML table change text color on condition

user_16952205 0
Viewed 1053

I have a google app script in google sheets that pulls data and puts it into a table and emails it. It works great, but my question is, how do I change the text color to red if a table value, for example r[7], equals FAULT instead of Good?

function sendEmail() {
  
  const ss  = SpreadsheetApp.getActiveSpreadsheet();
  const ws = ss.getSheetByName('Sheet')//rename sheet name per your file;
  const headers = ws.getRange('A1:H1').getDisplayValues()//get table headers name;
  
  //assign variable to each header value
  const hospital = headers[0][0]; 
  const asset = headers[0][1];
  const time = headers[0][2];
  const helevel = headers[0][3];
  const hepressure = headers[0][4];
  const chillertemp = headers[0][5];
  const roomtemp = headers[0][6];
  const compressor = headers[0][7];

  const lr = ws.getRange('H14').getValues()//get last low row of active range, forula entered in B1 =countif(B3:B,"*")+2;

  const tablerangeValue = ws.getRange(2,1,18,9).getDisplayValues()//get range value, my data range start from 4th row and has 7 columns, pls chage per your need;

  const htmlTemplate = HtmlService.createTemplateFromFile('emailTable');

  htmlTemplate.hospital = hospital;
  htmlTemplate.asset = asset;
  htmlTemplate.time = time;
  htmlTemplate.helevel = helevel;
  htmlTemplate.hepressure = hepressure;
  htmlTemplate.chillertemp = chillertemp;
  htmlTemplate.roomtemp = roomtemp;
  htmlTemplate.compressor = compressor;
  htmlTemplate.tablerangeValue = tablerangeValue;

  const htmlForEmail = htmlTemplate.evaluate().getContent();
  
  
  var toEmail = 'user@email.com';
  var ccEmail = '';

  MailApp.sendEmail({
  to: toEmail,
  //cc: ccEmail,
  subject: "***Daily Readings***",
  htmlBody:htmlForEmail
    });

}
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
  table, th, td {
  border: 0px solid black;
  font-size:15px;
}

th, thead {
  background-color: lightblue;
}

</style>  
  </head>
  <body>
    <div>
      <table id="table1">
        <thead>
          <th><?= hospital ?></th><th><?= asset ?></th><th><?= time ?></th><th><?= helevel ?></th><th><?= hepressure ?></th><th><?= chillertemp ?></th><th><?= roomtemp ?></th><th><?= compressor ?></th>
        </thead>
        <tbody >
          <? tablerangeValue.forEach(r => {?>
          <tr> 
          <td><?= r[0] ?></td><td><?= r[1] ?></td><td><?= r[2] ?></td><td style="text-align:center"><?= r[3] ?></td><td style="text-align:center"><?= r[4] ?></td><td style="text-align:center"><?= r[5] ?></td><td style="text-align:center"><?= r[6] ?></td><td style="text-align:center" ><?= r[7] ?></td>
          </tr>
          <?})?>
          
        </tbody>

      </table>
      <script> 
       const values = document.querySelectorAll("td");

function changeTdColor() {
  for (let i = 0; i < values.length; i++) { // iterate all thorugh td
      if (values[i].innerText == "r[9]") { // check if td has desired value
          values[i].style.backgroundColor = "red"; // if matches, change color
          }
       }
}

changeTdColor(); // call function
      </script>
      
    </div>
  </body>
  
</html>

I have added the other part of code that pulls the data from the google sheet.

google-sheets css html
2 Answers

You can use javascript.

For example you can iterate all td and check values.

const values = document.querySelectorAll("td");

function changeTdColor() {
  for (let i = 0; i < values.length; i++) { // iterate all thorugh td
      if (values[i].innerText == "r[9]") { // check if td has desired value
          values[i].style.backgroundColor = "red"; // if matches, change color
          }
       }
}

changeTdColor(); // call function
<table id="table1">
      <tr> 
        <td>r[0]</td>
        <td>r[1]</td>
        <td>r[2]</td>
        <td>r[9]</td>
        <td>r[4]</td>
        <td>r[9]</td>
    </tr>

</table>

user_119708360 

<html>

  <head>
  
    <base target="_top">
    
    
    <style>
      table, th, td {
      border: 0px solid black;
      font-size:15px;
      }

      th, thead {
        background-color: lightblue;
      }

</style>  

  </head>
  
  
  <body>
  
    <div>
    
    <?php define("r",["Good", "FAULT", "Good", "Good", "Good", "Good", "Good", "Good"]); ?>
    
      <table id="table1">
      
          <tr> 
          <td><?php if (r[0]=="FAULT") { echo "<td style='color:red'>" . r[0] . "</td>"; } else { echo "<td style='color:black'>" . r[0] . "</td>"; } ?></td>
          <td><?php if (r[1]=="FAULT") { echo "<td style='color:red'>" . r[1] . "</td>"; } else { echo "<td style='color:black'>" . r[1] . "</td>"; } ?></td>
          <td><?php if (r[2]=="FAULT") { echo "<td style='color:red'>" . r[2] . "</td>"; } else { echo "<td style='color:black'>" . r[2] . "</td>"; } ?></td>
          <td><?php if (r[3]=="FAULT") { echo "<td style='color:red'>" . r[3] . "</td>"; } else { echo "<td style='color:black'>" . r[3] . "</td>"; } ?></td>
          <td><?php if (r[4]=="FAULT") { echo "<td style='color:red'>" . r[4] . "</td>"; } else { echo "<td style='color:black'>" . r[4] . "</td>"; } ?></td>
          <td><?php if (r[5]=="FAULT") { echo "<td style='color:red'>" . r[5] . "</td>"; } else { echo "<td style='color:black'>" . r[5] . "</td>"; } ?></td>
          <td><?php if (r[6]=="FAULT") { echo "<td style='color:red'>" . r[6] . "</td>"; } else { echo "<td style='color:black'>" . r[6] . "</td>"; } ?></td>
          <td><?php if (r[7]=="FAULT") { echo "<td style='color:red'>" . r[7] . "</td>"; } else { echo "<td style='color:black'>" . r[7] . "</td>"; } ?></td>
          </tr>
        
      </table>
      
    </div>
    
  </body>
  
  </html>
user_74930430
Related