Zebra Style in CSS – 2

zebraaa

Daha önce https://timuraykutyildirim.wordpress.com/2012/02/06/zebra-style-in-css/ adresindeki yazımda Zebra Style’ı html’in <table> etiketi ile oluşturduğumuz tablolarda uygulamayı göstermiştim. Ama tabi artık devir değişti. jQuery olmadan JavaScript yazılamıyor piyasada. <div> kullanamayanı ayıplıyorlar dersem yeridir.

Geçen bir tablo oluşturmam gerektiğinde internette handsontable isimli jQuery kütüphanesini keşfetmiştim. Adamlar resmen excel’in javascript eşleniğini yapmışlar, çok başarılı. Ben de hemen ofiste yaptığım projeye dahil ettim çünkü hangi boyutta data gönderirsem göndereyim tablo halinde gösterebiliyordu. Birazda dökümanını kurcalayıp diğer özelliklerine bakınca gayet başarılı buldum.

Bu yazının çıkış noktası da aslında handsontable’a dayanıyor. div ile oluşturulan tabloda zebra style oluşturmak için aşağıdaki kodu inceleyebilirsiniz, hem handsontable’ın nasıl kullanıldığını da görmüş olursunuz:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script src="http://warpech.github.io/jquery-handsontable/lib/jquery.min.js"></script>
<script src="http://warpech.github.io/jquery-handsontable/dist/jquery.handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http://warpech.github.io/jquery-handsontable/dist/jquery.handsontable.full.css">
<link rel="stylesheet" media="screen" href="http://warpech.github.io/jquery-handsontable/demo/css/samples.css?20140401">

<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}
.zebraStyle > tbody > tr:nth-child(2n+1) > td {background: #e0e0d1;}
</style>

<script type='text/javascript'>
var arr= [["", "2012", "2013", "2014(YTD)"],["Ferrari", 1460089088.3900001, 1637243070.99, 283566771.55000001],["Alfa Romeo", 1199141138.1900001, 1224624821.1500001, 192307335.49000001]];

$(document).ready( function(){
$('#myTable').handsontable({
data: arr,
minSpareRows: 1,
contextMenu: true,
readOnly: true,
fixedColumnsLeft: 1
});
$('#myTable').find('table').addClass('zebraStyle');
});
</script>
</head>
<body>
<div id="myTable" class="handsontable" style="width: 400px; margin-left:auto; margin-right:auto; background-color:silver"></div>
</body>
</html>

 

Son tahlilde yukarıdaki kodun şöyle bir görüntüsü olacaktır:

table

Yorum bırakın

Filed under CSS

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s