在子窗口/數據中的第n個孩子（偶數）

我在使我的表格行中的第n個孩子（偶數）css正常工作上有點困難。在子窗口/數據中的第n個孩子（偶數）

我創建了一個搗鼓你也看到了問題所在：http://jsfiddle.net/jn9q8/

我有這樣的過濾系統，我有些國家分裂後出版。如果您點擊頂部的「全部」，您將獲得所有發佈商和第n個孩子（偶數）的正常工作，併爲每個第二個表格行背後留下灰色背景。

如果你再點擊「EST」，你會發現第n個孩子（偶數）不再像在那裏那樣工作。例如，您可以在一行中看到2條灰色背景線，因爲「ALL」類別中的一些發佈者不屬於「EST」，並且當然第n個孩子的樣式不知道。

我的風格它像這樣：

 table.pubTable tr:nth-child(even) td{ 
     background-color: #dcdcdc; 
     width: 627px; 
     height: 26px; 
     padding-top: 12px; 
     }

會不會有任何其他方式使其所以沒有工作，不管你會點擊的背景色是什麼類將永遠是即使在每個出版商？

來源

2014-02-24 SmalliSax

是按國家排序的行嗎？ –

嗨薩爾曼 - 他們不應該，每個出版商是在錶行內，並有表格數據。然後出版商按國家排序 – SmalliSax

隱藏和元素不會將其刪除，因此就CSS而言，該元素仍然存在，並且仍應計算在nth-child之內。

我的建議是克隆表格以充當「模板」。然後，在更改顯示的行時，從該「模板」創建一個克隆，並從其中刪除不應顯示的行。然後，您可以淡出顯示的表格，並淡入新的表格。

來源

2014-02-24 12:04:16

Hi @Niet，非常感謝您的建議。我不想讓線程再打開一段時間，看看我能否獲得更多想法，如果不能，我會在今天晚些時候回答你的問題。謝謝！ – SmalliSax

當你說「克隆表格」時，你是在談論基本上覆制/粘貼整個表格模板的表格嗎？（關於淡出顯示的表格，提示會很好）我對此很新，所以對於我的小知識感到抱歉。 – SmalliSax

在[Vanilla JS]（http://vanilla-js.com/）中，它就像'theTable.cloneNode（true）'一樣簡單。 –

這個問題的原因是由於你的CSS代碼給所有tr增加了樣式，所以即使你隱藏了一些tr，它仍然在dom中並且包含在奇數中。

一種方法，你可以嘗試最初是一個叫秀類添加到所有的行，然後你的CSS將

table.pubTable tr.show:nth-child(even) td{ 
     background-color: #dcdcdc; 
     width: 627px; 
     height: 26px; 
     padding-top: 12px; 
     } 

table.putTable tr.hide{ 
    display:none; 
}

現在

一旦你應用的過濾器，因此所有這些行不需要顯示刪除類節目，並添加類隱藏現在你的風格只是過濾tr.show，所以它會計數偶數和奇數只tr.show是可見的，你會得到你想要的。

來源

2014-02-24 12:39:20

'nnth-child'並沒有考慮到類 - 事實上，甚至沒有'nnth-type-type'，因爲這只是節點名稱中的因素。 –

在子窗口/數據中的第n個孩子（偶數）

回答

相關問題