[Çözüldü] jQuery ve div ile oluşturulmuş html tablosuna zebra stili koymak

Başlatan Timur, 14 Mayıs 2014 - 15:37:53

« önceki - sonraki »

0 Üyeler ve 1 Ziyaretçi konuyu incelemekte.

Yazdır
Aşağı git Sayfa1
Kullanıcı Eylemleri

Timur

14 Mayıs 2014 - 15:37:53 Son düzenlenme: 16 Mayıs 2014 - 12:30:03 Timur
Zebra stilinden kasıtım, Mesela bir satırın gri diğerinin sarı olmasını ve sırayla bunların böyle değişmesini istiyorum.
Eğer <table> kullansaydım bu gayet kolaydı. Şöyleki:

Kod Seç
.zebraStyle {
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
}

Fakat şu an handsontable isimli jquery eklentisini kullanıyorum. (http://handsontable.com/)

Aşağıda html kodumu paylaşıyorum. Bu sorunu nasıl çözebilirim?

Kod Seç

<!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 tr:nth-child(even) {background: #CCC}
            .zebraStyle tr:nth-child(odd) {background: #FFF}
        </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>

gocen

#1
14 Mayıs 2014 - 16:42:29
Bu eklentiyi hangi amaçla kullanıyorsunuz bilmiyorum ama
jquery mobile işinizi görmüyor mu?
Ayinesi iştir kişinin lafa bakılmaz,
Şahsın görünür, rütbe-i aklı eserinde.
Ziya Paşa

Timur

#2
16 Mayıs 2014 - 12:14:47
Alıntı yapılan: gocen - 14 Mayıs 2014 - 16:42:29
Bu eklentiyi hangi amaçla kullanıyorsunuz bilmiyorum ama
jquery mobile işinizi görmüyor mu?

ios uygulaması içerisinde göstereceğim bu tabloyu. jQuery mobile daha önce kullanmadım fakat sorunu şöyle çözdüm:

CSS:
Kod Seç
.zebraStyle > tbody > tr:nth-child(2n+1) > td {background: #e0e0d1;}

JavaScript:
Kod Seç
$('#myTable').find('table').addClass('zebraStyle');
Yazdır
Yukarı git Sayfa1
Kullanıcı Eylemleri