HTML表備用行的色彩搭配隱藏的行

這是非常簡單的一個已經實現了預期的結果，我現在面臨的問題是，當我有一個隱藏的行，顏色圖案運行到的問題。

這裏是我的小提琴：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; 
}

任何幫助表示讚賞。

來源

2014-02-26 Oam Psy

似乎無法與目前普通的CSS的一個解決方案。 nth-child工作正常。桌子上有孩子，可以看到或不看。所以你需要有一個JavaScript解決方案。我已經更新了你的提琴：http://jsfiddle.net/2Wt49/9/

它執行的是一個jQuery的功能，看起來像這樣：

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

來源

2014-02-26 11:53:29

的nth-child或nth-of-type僞類總是指望所有的元素，無論它們是否是可見。我可以想出兩種實現隱藏行的斑馬條紋的方法：

將類名添加到行中，使用JavaScript在顯示或隱藏行時調整類名。
在桌子上使用的重複條紋背景作爲一個整體，與每個條紋爲相同的高度，一個錶行。

來源

2014-02-26 11:55:00 user1482965

我做了一些更改您的jsfiddle例子，並得到它的工作...

http://jsfiddle.net/2Wt49/10/

我增加了以下功能...

function setRowClasses() { 
    $("#bs-search-results tbody tr") 
     .removeClass("even") 
     .filter(function() { 
      return $(this).height() != 1; 
     }) 
     .each(function(i) { 
      if (i % 2 == 0) $(this).addClass("even"); 
     }); 
}

，設置每個偶數編號的可見行都有一個類，它是影響樣式的類，而不是使用css來確定它是奇數行還是偶數行。

該函數然後需要的onload /被叫onready，當你切換表中的任何行。

出於好奇，是有一個原因，你不只是設置visuallyhidden到display:none？

來源

2014-02-26 11:56:09 Archer

感謝射手！你的例子似乎工作得很好，Nico O的答案也在工作，但更簡單一點，是否有任何職業的和職業的？ –

最後回到我的問題。 Nico的答案顯然比較乾淨，但是不能用你原來的css，因爲你沒有設置元素的可見狀態。你所做的事確實讓你看不到隱藏的行，但是它們仍然被jQuery選擇器分類爲可見，這就是爲什麼我最終在我的答案中按高度過濾的原因。如果你可以改變你的css使用'display：none'作爲隱藏行，那麼Nico的答案肯定是更好的選擇。 – Archer

哦，是的。對不起我屠殺你的CSS;）很好的答案@Archer –

試試這個，

這裏是演示http://jsfiddle.net/dhana36/2Wt49/14/

$(".ShowMe").click(function() { 

     $("#itsHidden").toggleClass("visuallyhidden"); 
     $("#itsHidden2").toggleClass("visuallyhidden"); 
    $('tbody tr').not('.visuallyhidden').each(function(index,el){ 

     if(index%2 != 0){ 
     $(this).css('background','#f2f2f2') 
     } 
     else{ 
      $(this).css('background','#fff') 
     } 
    }); 
    });

來源

2014-02-26 11:59:44 dhana

HTML表備用行的色彩搭配隱藏的行

回答

相關問題