斑馬使用CSS3對隱藏行進行條帶分割？

我有一個表斑馬使用CSS3對隱藏行進行條帶分割？

<table id="mytable"> 
    <tr style="display: none;"><td>&nbsp;</td></tr> 
    <tr><td>&nbsp;</td></tr> 
    <tr style="display: none;"><td>&nbsp;</td></tr> 
    <tr><td>&nbsp;</td></tr> 
    <tr><td>&nbsp;</td></tr> 
    <tr><td>&nbsp;</td></tr> 
</table>

我試圖設置表分拆使用第n個孩子選擇，但似乎就是無法破解它。

table #mytable tr[@display=block]:nth-child(odd) { 
     background-color: #000; 
} 
table #mytable tr[@display=block]:nth-child(odd) { 
     background-color: #FFF; 
}

我很確定我很接近...似乎無法破解它。

有人通過線索？

來源

2010-09-22 Alex C

下面就是你將要得到的。請注意，您不能使nth-child只顯示行數; nth-child將採取 n子元素不管什麼，而不是第孩子匹配給定的選擇器。如果您想要缺少一些行而不影響斑馬條紋，則必須完全將其從表格中刪除，無論是通過DOM還是在服務器端。

<!DOCTYPE html> 
<style> 
#mytable tr:nth-child(odd) { 
     background-color: #000; 
} 
#mytable tr:nth-child(even) { 
     background-color: #FFF; 
} 
</style> 
<table id="mytable"> 
    <tr><td>&nbsp;</td></tr> 
    <tr><td>&nbsp;</td></tr> 
    <tr><td>&nbsp;</td></tr> 
    <tr><td>&nbsp;</td></tr> 
    <tr><td>&nbsp;</td></tr> 
    <tr><td>&nbsp;</td></tr> 
</table>

下面是我做了修正：

table #mytable tr[@display=block]:nth-child(odd) { 
     background-color: #000; 
}

沒有必要指定一個id基於選擇的祖先選擇;只有過一個元素，將匹配#table，所以你只是在加入table添加額外的代碼。

#mytable tr[@display=block]:nth-child(odd) { 
     background-color: #000; 
}

現在，[@display=block]將匹配其中有一個屬性display設置爲阻止元素，如<tr display=block> 。顯示不是有效的HTML屬性;你似乎試圖做的是讓選擇器與元素的樣式匹配，但是你不能在CSS中這樣做，因爲瀏覽器需要在CSS中應用樣式，然後才能找出它，它正在應用這個選擇器時正在進行中。因此，您將無法選擇是否顯示錶格行。由於nth-child只能採取 n這個孩子不管是什麼，而不是 n有一些屬性，我們將不得不放棄在這部分的CSS。還有nth-of-type，它選擇相同元素類型的第012個孩子，但這就是你所能做的。

#mytable tr:nth-child(odd) { 
     background-color: #000; 
}

而且你有它。

來源

2010-09-22 22:20:37

感謝。由於我通過表中的所有行使用的原型和隱藏/取消隱藏基於細胞的一個篩選條件循環，纔有可能給類添加到沒有隱藏的所有行，以及第N基於該類的-CHILD或NTH-OF-TYPE條帶？ tr .visible_row：nth-child（奇怪）？ – 2010-09-23 03:15:34

甚至只是： .visible_row：第n個孩子（奇）{＃000; } – 2010-09-23 03:17:23

@Alex'：nth-child'統計父元素的所有子元素，而不管它是否與任何前面的選擇器匹配。請記住，將兩個選擇器放在一起並且沒有空格意味着匹配匹配第一個*和*匹配第二個的任何元素。因此，如果第二行不可見，則「.visible_row：nth-child（even）」將不會與第二行匹配，並且您會看到第一行和第三行以奇數顏色顯示樣式，即使第二行是隱藏的。如果這就是你要做的效果，它會起作用，但你可能希望斑馬條紋只適用於可見行，這是不可能的。 – 2010-09-23 04:49:46

如果您使用JQuery來更改行的可見性，則可以將以下函數應用於表中，以在適當的位置添加.odd類。每當可見行不同時調用它。

 function updateStriping(jquerySelector){ 
      $(jquerySelector).each(function(index, row){ 
       $(row).removeClass('odd'); 
       if (index%2==1){ //odd row 
        $(row).addClass('odd'); 
       } 
      }); 
     }

而對於CSS簡單地做

table#tableid tr.visible.odd{ 
    background-color: #EFF3FE; 
}

來源

2011-12-20 02:20:37

爲什麼tr.visible.odd而不只是tr.odd？ – kdubs 2012-12-13 04:35:12

由於索引從0開始，爲了得到實際的奇數行，應該將索引％2 == 1更改爲索引％2 == 0 – mhost 2016-09-27 21:02:21

-1

我加入CSS：

tr[style="display: table-row;"]:nth-child(even) { 
     background-color: #f3f6fa; 
}

和創建TR在標籤

style="display: table-row;"

來源

2013-03-19 08:26:09 Anton

這是行不通的。 – inafalcao 2017-08-25 20:21:04

雖然可以」添加t斑馬使用CSS3對隱藏行進行條帶化處理，你可以做到它與JavaScript。這裏是如何：

var table = document.getElementById("mytable"); 
    var k = 0; 
    for (var j = 0, row; row = table.rows[j]; j++) { 
     if (!(row.style.display === "none")) { 
      if (k % 2) { 
       row.style.backgroundColor = "rgba(242,252,244,0.4)"; 
      } else { 
       row.style.backgroundColor = "rgba(0,0,0,0.0)"; 
      } 
      k++; 
     } 
    }

來源

2014-01-02 23:29:24 JSWilson

-1

jQuery的HTML表格

$("#mytabletr:odd").addClass('oddRow'); 
$("#mytabletr:even").addClass('evenEven');

和CSS斑馬顏色代碼，你可以做

.oddRow{background:#E3E5E6;color:black} 
.evenRow{background:#FFFFFF;color:black}

來源

2014-01-08 14:10:49

-1

你可以很容易僞造的斑馬條紋，如果你申請一個垂直在父表上重複漸變，定位完全匹配行的高度（行必須是透明的）。這樣桌子不會在乎是否隱藏了任何東西，無論如何它都會重複。

來源

2015-01-11 18:29:52 rale09

對於一個jQuery的方式，你可以使用這個功能，會遍歷在表中的行，檢查該行的visbility並（重新）設置類可見奇數行。

function updateStriping(jquerySelector) { 
     var count = 0; 
     $(jquerySelector).each(function (index, row) { 
      $(row).removeClass('odd'); 
      if ($(row).is(":visible")) { 
       if (count % 2 == 1) { //odd row 
        $(row).addClass('odd'); 
       } 
       count++; 
      }    
     }); 
    }

使用CSS設置奇數行的背景。

#mytable tr.odd { background: rgba(0,0,0,.1); }

然後，您可以通過使用調用此斑馬線劃線機時：

updateStriping("#mytable tr");

來源

2015-06-06 21:10:34 Stalzer

這對我有用，還有一個編輯。我需要專門清點以我的應用程序的不同方式顯示的內容。以下是我的工作：'''function updateStriping（jquerySelector）{ \t \t var visibleItems = []; \t \t $（jquerySelector）。每個（函數（）{ \t \t \t如果（$（本）。是（「：可見」））{ \t \t \t \t visibleItems.push（本）; \t \t \t} \t \t}）; 012（'。odd'）。removeClass（'odd'）; \t \t $（visibleItems）。每個（函數（指數，行）{ \t \t \t如果（指數％2 == 1）{//奇數行 \t \t \t \t $（行）.addClass（ '奇' ）; \t \t \t} \t \t \t其他{ \t \t \t \t //東西 \t \t \t} \t \t}）; }''' 對不起，混亂的代碼。 – 2016-12-13 14:59:45

我想出了一個排序的解決方案，但它是依賴於一個事實，即表永遠只能有一個最大數量隱藏的行，併爲每個可能的隱藏行需要2個額外的CSS規則的缺點。原則是，在每個隱藏行之後，您切換奇數行和偶數行的周圍的background-color。

這裏有一個簡單的例子只有3隱藏的行和長達其中4必要的CSS。你已經可以看到CSS如何成爲笨拙，但還是有人可能會發現一些使用它：

table{ 
 
    background:#fff; 
 
    border:1px solid #000; 
 
    border-spacing:1px; 
 
    width:100%; 
 
} 
 
td{ 
 
    padding:20px; 
 
} 
 
tr:nth-child(odd)>td{ 
 
    background:#999; 
 
} 
 
tr:nth-child(even)>td{ 
 
    background:#000; 
 
} 
 
tr[data-hidden=true]{ 
 
    display:none; 
 
} 
 
tr[data-hidden=true]~tr:nth-child(odd)>td{ 
 
    background:#000; 
 
} 
 
tr[data-hidden=true]~tr:nth-child(even)>td{ 
 
    background:#999; 
 
} 
 
tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{ 
 
    background:#999; 
 
} 
 
tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{ 
 
    background:#000; 
 
} 
 
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{ 
 
    background:#000; 
 
} 
 
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{ 
 
    background:#999; 
 
} 
 
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{ 
 
    background:#999; 
 
} 
 
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{ 
 
    background:#000; 
 
}

<table> 
 
    <tbody> 
 
    <tr><td></td><td></td></tr> 
 
    <tr><td></td><td></td></tr> 
 
    <tr data-hidden="true"><td></td><td></td></tr> 
 
    <tr><td></td><td></td></tr> 
 
    <tr><td></td><td></td></tr> 
 
    <tr><td></td><td></td></tr> 
 
    <tr><td></td><td></td></tr> 
 
    <tr data-hidden="true"><td></td><td></td></tr> 
 
    <tr data-hidden="true"><td></td><td></td></tr> 
 
    <tr><td></td><td></td></tr> 
 
    <tr><td></td><td></td></tr> 
 
    <tr><td></td><td></td></tr> 
 
    <tr><td></td><td></td></tr> 
 
    <tr><td></td><td></td></tr> 
 
    <tr><td></td><td></td></tr> 
 
    <tr><td></td><td></td></tr> 
 
    </tbody> 
 
</table>

來源

2016-04-27 14:24:36 Shaggy

jQuery的..

var odd = true; 
$('table tr:visible').each(function() { 
    $(this).removeClass('odd even').addClass(odd?'odd':'even'); 
    odd=!odd 
});

來源

2017-01-25 23:26:01 commonpike

斑馬使用CSS3對隱藏行進行條帶分割？

回答

相關問題