HTML table change text color on condition-CodePudding

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?

<!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>

CodePudding user response：

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>

CodePudding user response：


<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>