HTML表格使用隐藏行的替代行颜色 [英] HTML Table Alternate Row Colours With Hidden Rows

问题描述

我试图用行的交替颜色写简单的表。

Im trying to write simple table with alternate colors of rows.

这是很直接的一个已经取得了预期的结果，我面临的问题是当我有一个隐藏的行，颜色模式遇到问题。

This is pretty straight forward an have achieved the expected outcome, the issue i am facing is when i have a hidden row, the colour pattern runs into issues.

这是我的小提琴： http://jsfiddle.net/oampz/2Wt49/

如您所见，点击+

这是我的HTML：

    <table id="bs-search-results" class="tbl tbl--highlight stripes half-mb">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Height</th>
            <th>Weight</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="ShowMe">+ 0000111</td>
            <td>0000111</td>
            <td>0000111</td>
            <td>0000111</td>
        </tr>
        <tr id="itsHidden" class="visuallyhidden">
            <td>0000222</td>
            <td>0000222</td>
            <td>0000222</td>
            <td>0000222</td>
        </tr>
        <tr>
            <td>0000333</td>
            <td>0000333</td>
            <td>0000333</td>
            <td>0000333</td>
        </tr>
        <tr>
            <td>0000444</td>
            <td>0000444</td>
            <td>0000444</td>
            <td>0000444</td>
        </tr>
    </tbody>
</table>

这是我的CSS：

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
th {
    min-width: 22px;
}
.stripes tbody > tr:nth-child(2n+2) {
    background: #f2f2f2;
}
.stripes li:nth-child(2n+2) {
    background: #f2f2f2;
}
.tbl {
    border: 1px solid #d1d1d1;
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 2;
    clear: both;
}
.tbl th, .tbl td {
    padding: 3px;
    text-align: left;
    border-right: 1px solid #d1d1d1;
}
.tbl th {
    border-bottom: 1px solid #d1d1d1;
}
.tbl--highlight tbody tr:hover {
    background: #d4e8fc;
    cursor: pointer;
}
.tbl--input td {
    overflow: hidden;
}
.half-mb {
    margin: 0 0 12px 0;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

任何帮助。

推荐答案

目前似乎没有一个解决方案与纯CSS。 nth-child 正常工作。该表具有可见或不可见的子代。所以你需要一个javascript解决方案。我已更新您的小提琴： http://jsfiddle.net/2Wt49/9/

There seems not be a solution with plain CSS for that at the moment. nth-child is working correctly. The table has children which are there- visible or not. So you will need to have a javascript solution. I've updated your fiddle: http://jsfiddle.net/2Wt49/9/

它实现一个jQuery函数，如下所示：

it is implementing a jQuery function, that looks like this:

 function stripeTable(){
         $("table.stripes tr").removeClass("odd");
         $("table.stripes tr:visible:odd").addClass("odd"); 
    }

这篇关于HTML表格使用隐藏行的替代行颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！