How can you apply conditional formatting to table rows?
You can apply conditional formatting to table rows using jQuery by targeting specific cells based on their content.
| Student's Name | Grade |
|---|---|
| Brown, Emma | 4.0 |
| Johnson, Olivia | 2.6 |
| Smith, Liam | 4.5 |
| Williams, Isabella | 5.5 |
You can apply conditional formatting to table rows using jQuery by targeting specific cells based on their content.
<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 {
margin: 0 auto;
max-width: 600px;
padding: 2em;
}
.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');
});
});