Change the background of the entire row of a table

Question

I want the entire table row to change color (background color or text color) based on the value of the column labeled Status. If the value in the Status column is Expired, the background of the entire row should change.

(Edit: data will be dynamically pulled from the database).

Any suggestions?

HTML code

<table>
    <th>Bonus Competitions</th>
    <th>Value</th>
    <th>Link</th>
    <th>Expires</th>
    <th>Status</th>
    <tr>
        <td>Cash</td>
        <td>£500</td>
        <td><a href="#">Link</a></td>
        <td>18-Feb-17</td>
        <td>Active</td>
    </tr>
    <tr>
        <td>Sports Car</td>
        <td>£5000</td>
        <td><a href="#">Link</a></td>
        <td>18-Jan-17</td>
        <td>Expired</td>
    </tr>
</table>

Thanks in advance.

Answer 1

If you can change the way the table is displayed, I will just add the text as a class. This will be the best performance option and does not require JavaScript, and the content will not blink.

tr.Expired td {
  background-color: red;
}
tr.Active td {
  background-color: green;
}

<table>
  <thead>
    <tr>
      <th>Bonus Competitions</th>
      <th>Value</th>
      <th>Link</th>
      <th>Expires</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr class="Active">
      <td>Cash</td>
      <td>£500</td>
      <td><a href="#">Link</a>
      </td>
      <td>18-Feb-17</td>
      <td>Active</td>
    </tr>
    <tr class="Expired">
      <td>Sports Car</td>
      <td>£5000</td>
      <td><a href="#">Link</a>
      </td>
      <td>18-Jan-17</td>
      <td>Expired</td>
    </tr>
  </tbody>
</table>

Run codeHide result

JavaScript-, .

$("tr:has(td:last:contains('Expired'))").addClass("Expired");

tr.Expired td {
   background-color: red;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th>Bonus Competitions</th>
      <th>Value</th>
      <th>Link</th>
      <th>Expires</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cash</td>
      <td>£500</td>
      <td><a href="#">Link</a>
      </td>
      <td>18-Feb-17</td>
      <td>Active</td>
    </tr>
    <tr>
      <td>Sports Car</td>
      <td>£5000</td>
      <td><a href="#">Link</a>
      </td>
      <td>18-Jan-17</td>
      <td>Expired</td>
    </tr>
  </tbody>
</table>

Hide result

Answer 2

CSS tr.

tr.active > td {
  background-color: green;
}

tr.expired > td {
  background-color: red;
}

https://jsfiddle.net/jt717mL8/

Answer 3

In your case, the status column is fifth. So you can do something like:

$('table tr:gt(0)').each(function(idx, ele) {
  if ($(ele).find('td:eq(4)').text() == 'Expired') {
  	$(ele).css('backgroundColor', 'yellow');
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>
    <th>Bonus Competitions</th>
    <th>Value</th>
    <th>Link</th>
    <th>Expires</th>
    <th>Status</th>
    <tr>
        <td>Cash</td>
        <td>£500</td>
        <td><a href="#">Link</a></td>
        <td>18-Feb-17</td>
        <td>Active</td>
    </tr>
    <tr>
        <td>Sports Car</td>
        <td>£5000</td>
        <td><a href="#">Link</a></td>
        <td>18-Jan-17</td>
        <td>Expired</td>
    </tr>
</table>

Run codeHide result

Answer 4

First you can get the status index th, and then check each tdwith the same index and check its text.

var i = $('th:contains(Status)').index();
$('tr').each(function() {
  var td = $(this).find('td').eq(i);
  if (td.text() == 'Expired') td.css('background', 'red')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <th>Bonus Competitions</th>
  <th>Value</th>
  <th>Link</th>
  <th>Expires</th>
  <th>Status</th>
  <tr>
    <td>Cash</td>
    <td>£500</td>
    <td><a href="#">Link</a>
    </td>
    <td>18-Feb-17</td>
    <td>Active</td>
  </tr>
  <tr>
    <td>Sports Car</td>
    <td>£5000</td>
    <td><a href="#">Link</a>
    </td>
    <td>18-Jan-17</td>
    <td>Expired</td>
  </tr>
</table>

Run codeHide result