How do I make a table cell's background change according to the data it stores?

user_16007893 0
Viewed 46

This is my html page:

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>My Page</title>
   </head>
   <body>
      <table>
         <tr>
            <td>Apples</td>
            <td>4</td>
         </tr>
         <tr>
            <td>Bananas</td>
            <td>13</td>
         </tr>
      </table>
   </body>
</html>

I would like to make it so if the quantity of the item is <10, the cell becomes green, while when it is >10, the cell becomes red. I can't figure how to make it work with one general function, insted of making one specifically for each cell.

html javascript
2 Answers

You don't really need the class assignment. Here is a one-line version using the classes "red" and "green" for the color-definitions:

document.querySelectorAll("tbody td:nth-child(2)")
.forEach(td=>td.className=+td.textContent>10?"red":"green")
.red   {background-color:red}
.green {background-color:green}
<table>
 <tr><td>Apples</td><td><b>4</b></td></tr>
 <tr><td>Bananas</td><td>13</td></tr>
 <tr><td>Oranges</td><td><em>17</em></td></tr>
</table>

The advantage of using .textContent over .innerHTML is that the code will still work in case there is some markup within the <td> elements.

user_26100610

Add a class to the cell <td class="qty">4</td> And do the follwing:

var qty = document.querySelectorAll(".qty");
     qty.forEach(function(e){
       if(e.innerHTML < 10) {
         e.style.backgroundColor = "green";
       }else {
        e.style.backgroundColor = "red";
       }    
  });
<table>
         <tr>
            <td>Apples</td>
            <td class="qty">4</td>
         </tr>
         <tr>
            <td>Bananas</td>
            <td class="qty">13</td>
         </tr>
      </table>

user_68860240
Related