如何制作斑马条纹的手提式桌子

How to make handsontable table zebra striped?

本文关键字：手提式 马条纹 何制作      更新时间：2023-09-26

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

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

>表示直接取当前的元素。

在本例中，您直接在。zebrastyle(您的表元素)之后使用body。

之后取奇数的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;
}
相关文章：