Mësime | jQuery | Formatim me kusht

Formatim sipas vlerës së elementit

Me jQuery ke mundësi që të formatosh një element sipas vlerës së tij. Për shembull sikur në demonstrimin këtu. 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 funksionin:

if ($(this).text() >= 5.5) // nëse nota është më e lartë se ose 5.5

Demonstrim me tabelë

Emri	Nota
Agim Balaj	4.0
Vjollca Berisha	2.6
Lulëzim Mali	4.5
Suzana Fusha	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>

jQuery

$(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');
});
});

Stilet e demonstrimit të tabelës

.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;
}