Tim*_*RIM 2 javascript css jquery zebra-striping handsontable
我正在使用 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>
网页代码
<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 （您的表格元素）之后获取 tbody。
之后取奇数 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;
}