How to make handsontable table zebra striped?

StackOverflow https://stackoverflow.com/questions/23652820

문제

I'm displaying some data in table by using handsontable library. Normally i can zebra stripe an html table like this:

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

But with handsontable i display my table within div element. How can i do this? Below you can see my html code:

    <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 code

<div id="myTable" class="handsontable"></div>

The div element on which the table will be appended to using the handshake script

Css

body {background: white; margin: 20px;}
h2 {margin: 20px 0;}

.zebraStyle > tbody > tr:nth-child(2n) > td {background: #ccc;}
.zebraStyle > tbody > tr:nth-child(2n+1) > td {background: #fff;}

The > means to take directly the element you present.

In this case you take the tbody directly after .zebraStyle ( your table element ).

After that take the odd tr rows.

At last take directly all td cells and apply the background color.

Script

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

다른 팁

Zebra stripes can be added by using the following css. No need for any javascript etc. Note that this works in version 0.16.1.

.htCore > tbody > tr:nth-child(even) > td {
    background-color: green;
}

.htCore > tbody > tr:nth-child(odd) > td {
    background-color: red;
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top