Jquery ile Tablo Satırlarını Renklendirme

Zebra Tablo

Jquery’de uzun zaman önce bildiğim ama deneme fırsatı bulamadığım bir özellik vardı: “alternate”.

Bu özellik sayesinde herhangi bir dizide tek ve çift sayı olma özelliğine göre biçim verebiliyoruz. Bunun en yaygın kullanıldığı yer ise çok fazla verinin listelendiği ve okuyucunun dikkatini dağıtan uzun tablolar. Sadece 2 satır kod ile Jquery’nin nimetlerinden faydalanarak tek satırları gri, çiftleri beyaz yapma yapabiliyoruz.

Aşağıda Jquery ile bunun nasıl yapıldığını en basit haliyle anlatmaya çalıştım.

JqueryScript

	$(document).ready(function()
	{
	//Tablolar Icın
	  $(".tablelist tr:even").css("background-color", "#ffffff");
	  $(".tablelist tr:odd").css("background-color", "#eeeeee");
	//Div Icin
	$("div:odd").css("background-color", "#ffffff");
	$("div:even").css("background-color", "#eeeeee");
	});

HTML

<table class="tablelist" border="0">
	<tr>
		<td>Satır 1 / Line 1</td>
	</tr>
	<tr>
		<td>Satır 2 / Line 2</td>
	</tr>
	<tr>
		<td>Satır 3 / Line 3</td>
	</tr>
	<tr>
		<td>Satır 4 / Line 4</td>
	</tr>
</table>
	<div>Satır 1 / Line 1</div>
	<div>Satır 2 / Line 2</div>
	<div>Satır 3 / Line 3</div>
	<div>Satır 4 / Line 4</div>

Herkese iyi çalışmalar

Leave a Reply