Change row color of a cell in a table using JS

Question

I want to change my row colour according to my tag using pure HTML CSS or JS and not with any external src since it is not supported in the application I am using where I want to do this.

Below is my code:

table { 
  width: 750px; 
  border-collapse: collapse; 
  margin:20px auto;
}
tr:nth-of-type(even) { 
  background: #eee;
}
tr:hover {
  background-color:#f5f5f5;
}
th { 
  background: #1489b8; 
  color: white; 
  font-weight: default; 
}

td, th { 
  padding: 10px; 
  border: 3px solid #ccc; 
  text-align: center; 
  font-size: 15px;
}
h3, p{
  text-align: center;
}

<head>
  <h3>Hi User,</h3>
  <p>An alert is created. Following are the details.</p>
</head>
<table style="width:100%">
  <thead>
    <tr>
      <th> Description</th>
      <td>working</td>
    </tr>
    <tr>
      <th>Parameter</th>
      <td>Shutdown</td>
    </tr>
    <tr>
      <th>Machine </th>
      <td>ABC</td>
    </tr>
    <tr>
      <th> Type</th>
      <td>Sensor Machine</td>
    </tr>
    <tr>
      <th> Severity</th>
      <td>Low</td>
  </thead>
</table>

The last tag reads "Low" in this example, I want the row colour to change to green. If it reads medium it should change to "yellow". Any way this could happen?

the only way this can happen is via Javascript. Did you try anything on your own? — cloned, Sep 10 '20 at 07:03
If you slightly change your table to something having 'low' or 'medium' or whatever inside the HTML tag, then it will be easily possible via CSS. For example: `...` — Anton, Sep 10 '20 at 07:07
@cloned , i tried alternating row colors. Really new to JS. Can you help me with this? — Sca, Sep 10 '20 at 07:11
Or for example using classes: `...`. But if you can't change the table, then you have to use JavsScript. See this: https://stackoverflow.com/questions/1777357/css-rule-based-on-content — Anton, Sep 10 '20 at 07:11
For alternating rows I would use css `tr:nth-child(even) {background: #CCC}` and `tr:nth-child(odd) {background: #FFF}`. To set a color based on content @Anton is right. In this case I would also set a class using js. `var element = document.getElement....; element.classList.add("mystyle");` — Christian Hager, Sep 10 '20 at 07:22
Does this answer your question? [Color row based on cell value](https://stackoverflow.com/questions/15510708/color-row-based-on-cell-value) — MaxiGui, Sep 10 '20 at 07:29

score 4 · Accepted Answer · answered Sep 10 '20 at 07:19

You can simply and the easiest way is to use Javascript querySelectorAll method to get all the td's in your table and check their textContent and apply the color using if condition

If the condition matches with the severity levels then you can style the background whatever you prefer to use.

Live Working Example:

let getTds = document.querySelectorAll('table td')

getTds.forEach(function(row) {
  //Low
  if (row.textContent == 'Low') {
    row.style.background = 'green'
  }
  //Medium
  if (row.textContent == 'Medium') {
    row.style.background = 'yellow'
  }
})

table {
  width: 750px;
  border-collapse: collapse;
  margin: 20px auto;
}

tr:nth-of-type(even) {
  background: #eee;
}

tr:hover {
  background-color: #f5f5f5;
}

th {
  background: #1489b8;
  color: white;
  font-weight: default;
}

td,
th {
  padding: 10px;
  border: 3px solid #ccc;
  text-align: center;
  font-size: 15px;
}

h3,
p {
  text-align: center;
}

<head>
  <h3>Hi User,</h3>
  <p>An alert is created. Following are the details.</p>
</head>
<table style="width:100%">
  <thead>
    <tr>
      <th> Description</th>
      <td>working</td>
    </tr>
    <tr>
      <th>Parameter</th>
      <td>Shutdown</td>
    </tr>
    <tr>
      <th>Machine </th>
      <td>ABC</td>
    </tr>
    <tr>
      <th> Type</th>
      <td>Sensor Machine</td>
    </tr>
    <tr>
      <th> Severity</th>
      <td>Low</td>
    </tr>

  </thead>

  <thead>
    <tr>
      <th> Description</th>
      <td>working</td>
    </tr>
    <tr>
      <th>Parameter</th>
      <td>Shutdown</td>
    </tr>
    <tr>
      <th>Machine </th>
      <td>ABC</td>
    </tr>
    <tr>
      <th> Type</th>
      <td>Sensor Machine</td>
    </tr>
    <tr>
      <th> Severity</th>
      <td>Medium</td>
    </tr>

  </thead>
</table>

Hi! this worked. I have upvoted and ticked your answer! Thank you so much!!! @AlwaysHelping — Sca, Sep 10 '20 at 07:31
@Sca but this solution is only for table cells, not for rows... I hope you will adjust it by yourself. — Anton, Sep 10 '20 at 07:36
@Anton thats not a big deal at all. We just need to check the `textContent` and apply color to that row as well :) — Always Helping, Sep 10 '20 at 07:38
@AlwaysHelping I am sure you can do this, but curious if Sca can do this as well :) — Anton, Sep 10 '20 at 07:40
@Sca Please let me know if you need any other help with i am happy to help further :) — Always Helping, Sep 10 '20 at 07:41

Change row color of a cell in a table using JS

1 Answers1