标签: zebra-striping

我试图在我的网站上斑马条纹我的divs,听起来很简单,但是我发现当我在div的行之间添加一个标题时,它似乎计算奇数/偶数样式中的标题

HTML

<div class="container">
    <h3>Title</h3>
    <div class="row">Content</div>
    <div class="row">Content</div>
    <h3>Title</h3>
    <div class="row">Content</div>
    <div class="row">Content</div>
    <div class="row">Content</div>
    <h3>Title</h3>
    <div class="row">Content</div>
    <div class="row">Content</div>
    <div class="row">Content</div>
    <div class="row">Content</div>
</div>

CSS

.container {
    width:600px;
    margin:0 auto;
}

.row {
    line-height:24pt;
    border: solid 1px black;
}

.row:nth-child(odd) {
    background: #e0e0e0;
}

h3 {
    line-height:36pt;
    font-weight:bold;
    color:blue;
}

小提琴

我本以为已经在小提琴中的代码基本上会忽略标题并继续进行条带化,但看起来它认为标题是一个小孩

使用KnockoutJS对列表进行条带化的最佳方法是什么？下面div上的类应该是偶数或奇数,取决于它在列表中的位置,并在添加或删除项时更新.

<div class="Headlines loader" 
     data-bind="css: { loader: headlines().length == 0 }, 
                       template: { name: 'recentHeadlinesTemplate',
                                   foreach: beforeHeadlineAddition, 
                                   beforeRemove: function(elem) { $(elem).slideUp() },
                                   afterAdd: slideDown }">
</div>

<script type="text/html" id="recentHeadlinesTemplate">
    <div class="even">
        ${Title}
    </div>  
</script>

我们不能让斑马条纹在jqGrid中工作.

我们使用altclass和altRows - 问题是看来ui-widget-contentJQuery UI 中的类有一个background覆盖我们altclass background设置的设置.有任何想法吗？

更新:以下两个答案都有效.到目前为止,Oleg是最干净的解决方案.

对于Oleg的解决方案,必须在包含JQuery UI CSS类之后定义altRows类,因为JQuery UI和自定义alt行类都定义了background属性和最后定义的类类wins.

我有一个TextView,我想倒数(3 ... 2 ...... 1 ......事情发生了).

为了使它更有趣,我希望每个数字以完全不透明度开始,并淡出透明度.

有一个简单的方法吗？

我有一个很长的多个div列表...让我们说20 div

所有包裹在另一个..

<div id="main">
 <div class="xyz"> text text </div>
 <div class="xyz"> text text </div>
 <div class="xyz"> text text </div>
 <div class="xyz"> text text </div>
 <div class="xyz"> text text </div>
.... etc
</div>

我喜欢在两个div中的一个中添加类"灰色"并使其成为斑马!jquery拜托!

我们的.less文件中有一个基本的斑马条纹图案.list-striped.

我们甚至让它为嵌套列表工作,也就是说,它会反转选择器,否则你最终得到父列表项,并且子项的第一个列表项具有相同的样式而不是对立面.

这样做很好,但是,我们想要有N级深度,所以我们真的不想只是将样式嵌套到我们认为用户可以嵌套的任何东西上面,我们希望有一些东西可以整理一下,让它适用于N级而不仅仅是2级列表？

我想我需要一些nth-child(even)/nth-child(odd)嵌套的魔法.list-item？

• C1
  • C2
    • C1
    • C2
  • C1
    • C2
  • C2
• C2
• C1
• C2

HTML基本上是

<div class="list-striped">
    <div class="list-item">
        <a class="title">List title</a>

        <!-- Start N-Level Nesting -->
        <div class="list-striped">
            <div class="list-item">
                <a class="title">List title</a>
                <!-- We could duplicate the n-level nesting item here as 
                     much as we want -->
            </div>
        </div>
        <!-- End N-level Nesting -->

    </div>

    <div class="list-item">
        <a class="title">List title</a>

        <!-- Start N-Level Nesting -->
        <div class="list-striped">
            <div class="list-item">
                <a class="title">List title</a> …

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

我有一张斑马条纹的桌子:

tr:nth-child(even)
{
    background-color: red;
}
tr:nth-child(odd)
{
    background-color: blue;
}

我想显示/隐藏它的行,保持表条纹(从更改的行重新着色到最后一行).我看到有两种方法可以做到这一点:

1. 创建一个不可见的表,并<TR>使用jQuery 移动after()/从中移动它.我已经测试了分离并且它的工作原理(表在分离时重新着色),但是插入分离的(无处)行不会,所以将行移动到另一个表应该有帮助,我想.
2. 在我们切换之后调用jQuery toggle()以及创建/删除不可见<TR>.

哪一个更好？也许,还有更好的方法吗？

问候,

我有一个表使用tableorter和斑马条纹表行.我想将斑马条纹添加到表COLUMNS中的一个,以便给它一点强调.像这样:

我有一个表,其中包含由类标记的行.这些行应该是斑马条纹.需要注意的是,它们并不总是连续的.

我尝试过按表和类名匹配,但最终结果总是不正确.发生的事情是条带化将应用于表级别,然后仅在具有类的行上启用.

我需要改变什么才能使这项工作像我想要的那样？

脚本

function FormatTable()
{
   $("#TableId .arbitrarySelector:nth-child(2n+1)" ).addClass('anotherEquallySpecialRow')
}

HTML

<table id="TableId" onclick="FormatTable()">
    <tr class="arbitrarySelector">
        <td><div class="space">Should be Changed and is</div></td>
    </tr>
    <tr class="arbitrarySelector">
        <td><div class="space">Should Not be Changed and is Not</div></td>
    </tr>
    <tr class="arbitrarySelector">
        <td><div class="space">Should be Changed and is</div></td>
    </tr>
    <tr>
        <td><div class="space"></div></td>
    </tr>
    <tr class="arbitrarySelector">
        <td><div class="space">Should NOT be changed but is</div></td>
    </tr>
    <tr>
        <td><div class="space"></div></td>
    </tr>
    <tr class="arbitrarySelector">
        <td><div class="space">Should be Changed and is</div></td>
    </tr>
    <tr>
        <td><div class="space"></div></td>
    </tr>
    <tr>
        <td><div class="space"></div></td>
    </tr>
    <tr …