| Emri | Nota |
|---|---|
| Agim Balaj | 4.0 |
| Vjollca Berisha | 2.6 |
| Lulëzim Mali | 4.5 |
| Suzana Fusha | 5.5 |
Çka është funksioni i formatimit me kusht sikur në jQuery?
Me jQuery ke mundësi që të formatosh një element sipas vlerës së tij. Për shembull sikur në demonstrimin këtu më lartë. Nëse studenti e ka notën 5.5 ose më të lartë atëherë përdoret një stil tjetër CSS për atë rresht të tabelës.
Kjo bëhet e mundur me këtë funksion:
JS
if ($(this).text() >= 5.5) // nëse nota është më e lartë se ose 5.5
HTML
<div class="mbajtesi-me-demonstrim">
<table class="table tabela" width="100%" cellpadding="0" cellspacing="1">
<tr>
<th>Emri</th>
<th>Nota</th>
</tr>
<tr>
<td>Agim Balaj</td>
<td>4.0</td>
</tr>
<tr>
<td>Vjollca Berisha</td>
<td>2.6</td>
</tr>
<tr>
<td>Lulëzim Mali</td>
<td>4.5</td>
</tr>
<tr>
<td>Suzana Fusha</td>
<td>5.5</td>
</tr>
</table>
</div>
JS
$(function() {
$('.tabela td').each(function() {
if ($(this).text() >= 5.5) // nëse nota është më e lartë se ose 5.5
$(this).parent().css('backgroundColor', '#ecc87a');
else
$(this).parent().css('backgroundColor', '#dcccaa');
});
});
CSS
.mbajtesi-me-demonstrim {
margin: 0 auto;
max-width: 400px;
padding: 2rem;
}
.mbajtesi-me-demonstrim .tabela td {
padding: 4px 8px;
}
.mbajtesi-me-demonstrim .tabela th {
padding: 2px 4px;
background-color: #454545;
color: #fff;
text-align: left;
}
.mbajtesi-me-demonstrim th,
.mbajtesi-me-demonstrim td {
color: #fff;
padding: 0.25em 0.5em;
text-align: left;
}
.mbajtesi-me-demonstrim th {
background: #3d4c53;
}
.mbajtesi-me-demonstrim .demo-even {
background: #e6772e;
}
.mbajtesi-me-demonstrim .demo-odd {
background: #f2af32;
}
.mbajtesi-me-demonstrim tr:first-child th:first-child {
border-top-left-radius: 6px;
}
.mbajtesi-me-demonstrim tr:first-child th:last-child {
border-top-right-radius: 6px;
}
.mbajtesi-me-demonstrim tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
.mbajtesi-me-demonstrim tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}