【问题标题】:Trying to Zebra stripe arbitrary rows in a table试图斑马条纹表中的任意行
【发布时间】:2017-06-18 04:59:34
【问题描述】:

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

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

我需要做些什么改变才能让这项工作如我所愿?

脚本

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 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 class="arbitrarySelector">
        <td><div class="space">Should Not be Changed and is Not</div></td>
    </tr>
</table>

【问题讨论】:

    标签: javascript jquery html-table css-selectors zebra-striping


    【解决方案1】:

    你可能让这太难了。如果你想做斑马条纹,为什么不使用:odd selector 之类的东西并根据情况更改类。像这样的……

    // Add zebra striping.
    $('.arbitrarySelector:odd').addClass('zebra');
    

    然后 CSS 将类似于...

    .zebra 
    {
        background-color: #dddddd;
    }
    

    【讨论】:

    • 为你、Achem 和他的剃须刀加分。
    • @JustSmith - 很高兴我能帮上忙!您是否介意接受答案,以便其他人将来可以找到它(并且,我感谢代表)。 :-) 谢谢!
    • 抱歉,我会早点接受,但该网站让我等了,直到我下次使用该网站。愚蠢的规则。
    猜你喜欢
    • 2012-09-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-06-24
    • 2011-04-04
    • 1970-01-01
    • 1970-01-01
    • 2014-04-09
    相关资源
    最近更新 更多