Logo Luan Morina
Conditional formatting of table rows
 
Preview
Student's Name Grade
Brown, Emma 4.0
Johnson, Olivia 2.6
Smith, Liam 4.5
Williams, Isabella 5.5
HTML
<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>

CSS
.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 .demo-container {
margin-bottom: 2em;
}
.demo-container .demo-header {
background: #222;
padding: 5px 10px;
font-weight: bold;
color: #fff;
}
.demo-container .demo-container th,
.demo-container .demo-container td {
color: #fff;
padding: 0.25em 0.5em;
text-align: left;
}
.demo-container .demo-container th {
background: #3d4c53;
}
.demo-container .demo-even {
background: #e6772e;
;
}
.demo-container .demo-odd {
background: #f2af32;
}
.demo-container .demo-container tr:first-child th:first-child {
border-top-left-radius: 6px;
}
.demo-container .demo-container tr:first-child th:last-child {
border-top-right-radius: 6px;
}
.demo-container .demo-container tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
.demo-container .demo-container tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
JS
$(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');
});
});