2016-12-28 158 views
1

我使用數據表隱藏/顯示隱藏的列按鈕CSS樣式

<th class="none"></th> 

隱藏在數據表表最後一欄。 Datatable在第一列中創建一個按鈕,以在子行中顯示/隱藏此列。該按鈕的顏色在responsive.bootstrap.min.css設置:

table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before{ background-color:#5d9cec } 

我添加了一個自定義類的第一列作爲取決於行數據禁用按鈕:

.not-active { pointer-events: none; cursor: default; } 

我根據某些行的內容通過C#設置類。

<tr><td class='<%# DisableLink(Eval("InvoiceDate").ToString()) %>'><%# Eval("InvoiceNumber")%></td> 

所有這些按預期工作。

我想現在做的是設置當TD的類設置爲.NOT活性,在寫作背景色按鈕的背景顏色爲灰色。

我已經試過

.not-active > table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before{ background-color:#5d9cec } 

和幾十種不同的組合,但似乎無法得到正確的格式。

有什麼建議嗎?謝謝!

添加FSFiddle的要求:https://jsfiddle.net/yk06fbxa/3/

+1

你可以發佈小提琴鏈接嗎? –

+0

@PriyaPayyavula https://jsfiddle.net/yk06fbxa/3/謝謝! – Diomedes

+0

我假設你正在尋找類似於下面的解決方案。 http://stackoverflow.com/questions/14307163/changing-background-color-of-all-elements-with-the-same-class –

回答

2

,設置背景色的CSS規則是

table.dataTable.dtr-inline.collapsed tbody td:first-child:before, 
table.dataTable.dtr-inline.collapsed tbody th:first-child:before { 
    ... 
    background-color: #31b131; 
} 

要覆蓋此當<td>有類not-active,你可以修改它像:

table.dataTable.dtr-inline.collapsed tbody td.not-active:first-child:before, 
table.dataTable.dtr-inline.collapsed tbody th.not-active:first-child:before 
{ 
    background-color:#dddddd; 
} 

查看演示here。我已將第一行的td設置爲不具有not-active類,以確保它僅適用於.not-active類。

+0

完美,謝謝! – Diomedes