Как сделать ручной стол зеброй в полоску?

Я отображаю некоторые данные в таблице с помощью библиотеки handsontable. Обычно я могу зебра чередовать HTML-таблицы, как это:

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

Но с handsontable я показываю свою таблицу в элементе div. Как я могу это сделать? Ниже вы можете увидеть мой HTML-код:

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

Источник

2 ответа

Решение

HTML-код

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

Элемент div, к которому будет добавлена ​​таблица с использованием сценария рукопожатия

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

> Означает, что вы берете непосредственно элемент, который вы представляете.

В этом случае вы берете tbody сразу после.zebraStyle (ваш элемент таблицы).

После этого возьмите нечетные строки tr.

Наконец, возьмите непосредственно все ячейки td и примените цвет фона.

скрипт

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');
});
Источник

Полосы зебры могут быть добавлены с помощью следующего CSS. Не нужно никакого JavaScript и т. Д. Обратите внимание, что это работает в версии 0.16.1.

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

.htCore > tbody > tr:nth-child(odd) > td {
    background-color: red;
}
Источник
Другие вопросы по тегам