2010-04-07 74 views
6

我有一張有很多列的表格。我想讓用戶選擇要在表格中顯示的列。這些選項將是複選框以及列名稱。那麼如何隱藏/取消隱藏基於複選框的表格列?如何隱藏jQuery中的表列?

隱藏(每個行中使用.hide())每個td工作?可以是我可以將表格中的列的位置分配複選框值。所以第一個複選框意味着第一列,等等。然後在每一行中遞歸隱藏'編號'td。這會起作用嗎?

+0

請參考http://stackoverflow.com/questions/12455699/show-hide-table-column-with-colspan-using-jquery回答colspan – Lijo 2012-09-19 05:16:54

回答

14

嘗試:

function hideColumn(columnIndex) { 
    $('#mytable td:nth-child('+(columnIndex+1)+')').hide(); 
} 

這是一個非常基本的版本 - 它假定您的表不使用<TH>元素或具有可變列跨度,但基本概念是存在的。請注意0​​。爲了彌補這一點,我在最後階段添加了1個。

+6

@understack:如果您更改了「」函數爲'$('#mytable td:nth-​​child('+(columnIndex + 1)+'),#mytable th:nth-​​child('+(columnIndex + 1)+')')。hide(); ' – Mottie 2010-04-07 21:16:39

1

我建立了一個腳本來完成Rex的建議。每列中都有一個複選框(或元素),單擊它時,根據第n個孩子計算出它所在的列,然後在每個其他TR中隱藏相同的列。

之前.hide()我會添加一個我可以引用的類來返回列。

我遇到的問題是我正在處理大量表格,其中一些行有colspans,一些TD根據它們在行中的位置擁有唯一的類。我在IE中大肆宣傳問題,因爲IE並不總是以適當的樣式顯示()隱藏的TD。似乎IE很難重新繪製TD。