I need table background colour to be change based on the value present. can someone assist on this

Question

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
 border: 1px solid black
}
</style>
</head>
<body>

<h2>Table With Border</h2>

<p>Use the CSS border property to add a border to the table.</p>

<table style="width:100%">
  <tr>
    <th>Snaplex_name</th>
    <th>Node_name</th> 
    <th>CPU_Utilization</th>
    <th>Memory_Utilization</th>
    <th>Version</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>Server1</td>
    <td>Serverd01</td>
    <td>78</td>
    <td>25</td>
    <td>4.31</td>
    <td>up_and_running</td>
  </tr>
  <tr>
    <td>Server1</td>
    <td>serverd01</td>
    <td>60</td>
    <td>75</td>
    <td>4.31</td>
    <td>up_and_running</td>
  </tr>

<script>
    if(document.getElementsByTagName("td").innerHtml<=50){
        document.getElementsByTagName("td").style.backgroundColor="green";
    }
    else if(document.getElementsByTagName("td").innerHtml<=75 && document.getElementsByTagName("td").innerHtml>50){
document.getElementsByTagName("td").style.backgroundColor="Yellow";}
    else{
           document.getElementsByTagName("td").style.backgroundColor="Red";
         }

</script>
</html>

I tried the above code in HTML but it didn't worked for me. So I need help to get the colour code for CPU_utilization and memory utilization based on the specified values in HTML Code.I need table background colour to be change based on the value present.From 0-50 Green, 50-75 Yellow, 75-100 Red can someone assist on this.

I want to colour the CPU_Utilization and Memory_Utilization columns alone based on the values — Manoj D, Dec 23 '22 at 19:52
Read up about getElementsByTagName - it returns a collection not a single element - inspect the error in your browser's dev tools inspect facility console to see the problem. Here's reliable info: https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName — A Haworth, Dec 23 '22 at 19:56

DCR · Answer 1 · 2022-12-23T20:17:07.600

/*

    if(document.getElementsByTagName("td").innerHtml<=50){
   
        document.getElementsByTagName("td").style.backgroundColor="green";
    }
    else if(document.getElementsByTagName("td").innerHtml<=75 && document.getElementsByTagName("td").innerHtml>50){
document.getElementsByTagName("td").style.backgroundColor="Yellow";}
    else{
           document.getElementsByTagName("td").style.backgroundColor="Red";
         }
         
        */

let tds = document.getElementsByTagName("td")
for (i = 0; i < tds.length; i++){  
   let num = tds[i].innerHTML
   if(i == 4 || i == 10);
   else if(tds[i].innerHTML <= 50 )tds[i].style.backgroundColor = "green";
   else if(tds[i].innerHTML <= 75)tds[i].style.backgroundColor = "yellow";
   else if(Number.isInteger(Number(num)))tds[i].style.backgroundColor = "red";

}

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
 border: 1px solid black
}
</style>
</head>
<body>

<h2>Table With Border</h2>

<p>Use the CSS border property to add a border to the table.</p>

<table style="width:100%">
  <tr>
    <th>Snaplex_name</th>
    <th>Node_name</th> 
    <th>CPU_Utilization</th>
    <th>Memory_Utilization</th>
    <th>Version</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>Server1</td>
    <td>Serverd01</td>
    <td>78</td>
    <td>25</td>
    <td>4.31</td>
    <td>up_and_running</td>
  </tr>
  <tr>
    <td>Server1</td>
    <td>serverd01</td>
    <td>60</td>
    <td>75</td>
    <td>4.31</td>
    <td>up_and_running</td>
  </tr>
  </table>


</body>
</html>

This answer is not correct. You loop through all the tds, which causes the version to get a background color as well. This is against the requirement of Manoj D. — Suboptimierer, Dec 23 '22 at 20:13

Suboptimierer · Answer 2 · 2022-12-23T20:17:13.513

In general, this should be done on the server side. Depending on the value, a corresponding class should be set on the server side.

But if you want to do it client side, you have to loop through the table rows. In each row you must then check the two numbers. You always get a string with innerHTML / innerText. Therefore, you should convert the string into a number before the comparison, e.g. with parseint. Depending on the comparison you can then set the background.

const table = document.getElementById("table");

for(let i = 1; i < table.rows.length; i++) {
  setBackground(table.rows[i].cells[2]);
  setBackground(table.rows[i].cells[3]);
}

function setBackground(element) {
  const value = parseInt(element.innerText);
  if(value <= 50) {
    element.style.background = "green";
  } else if(value <= 75) {
    element.style.background = "yellow";
  } else {
    element.style.background = "red";
  }
}

<table style="width:100%" id="table">
  <tr>
    <th>Snaplex_name</th>
    <th>Node_name</th> 
    <th>CPU_Utilization</th>
    <th>Memory_Utilization</th>
    <th>Version</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>Server1</td>
    <td>Serverd01</td>
    <td>78</td>
    <td>25</td>
    <td>4.31</td>
    <td>up_and_running</td>
  </tr>
  <tr>
    <td>Server1</td>
    <td>serverd01</td>
    <td>60</td>
    <td>75</td>
    <td>4.31</td>
    <td>up_and_running</td>
  </tr>
</table>

I need table background colour to be change based on the value present. can someone assist on this

2 Answers2