2

我正在使用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>

4

2 回答 2

5

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');
});
于 2014-05-14T12:45:56.883 回答
4

可以使用以下 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;
}
于 2015-08-04T16:40:30.533 回答