How can you apply conditional formatting to table rows?

<div class="demo-container">
<table class="demo-table" width="100%" cellpadding="0" cellspacing="1">
 <tr>
  <th>Student's Name</th>
  <th>Grade</th>
 </tr>
 <tr>
  <td>Brown, Emma</td>
  <td>4.0</td>
 </tr>
 <tr>
  <td>Johnson, Olivia</td>
  <td>2.6</td>
 </tr>
 <tr>
  <td>Smith, Liam</td>
  <td>4.5</td>
  </tr>
 <tr>
 <td>Williams, Isabella</td>
  <td>5.5</td>
 </tr>
 </table>
</div>

.demo-container table {
  border-collapse: separate;
  border-spacing: 1px;
}

.demo-container .demo-table td {
  padding: 4px 8px;
}

.demo-container .demo-table th {
  padding: 2px 4px;
  background-color: #454545;
  color: #fff;
  text-align: left;
}

.demo-container {
  margin-bottom: 2em;
}

.demo-container th,
.demo-container td {
  color: #fff;
  padding: 0.25em 0.5em;
  text-align: left;
}

.demo-container th {
  background: #3d4c53;
}

.demo-container tr:first-child th:first-child {
  border-top-left-radius: 6px;
}

.demo-container tr:first-child th:last-child {
  border-top-right-radius: 6px;
}

.demo-container tr:last-child td:first-child {
  border-bottom-left-radius: 6px;
}

.demo-container tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}

$(function() {
$('.demo-table td').each(function() {
  if ($(this).text() >= 5.5) // if grade is 5.5 or higher
   $(this).parent().css('backgroundColor', '#ecc87a');
  else
   $(this).parent().css('backgroundColor', '#dcccaa');
});
});