使用css顯示/隱藏html表列

Question

我想顯示一個帶控件的基本html表來切換顯示/隱藏其他列：

<table id="mytable">
    <tr>
        <th>Column 1</th>
        <th class="col1">1a</th>
        <th class="col1">1b</th>
        <th>Column 2</th>
        <th class="col2">2a</th>
        <th class="col2">2b</th>
    </tr>
    <tr>
        <td>100</td>
        <td class="col1">40</td>
        <td class="col1">60</td>
        <td>200</td>
        <td class="col2">110</td>
        <td class="col2">90</td>
    </tr>
</table>

因此，第1列和第2列將是默認顯示的唯一列 - 但是當您單擊列1時，我希望1a和1b切換，而第2列則使用2a和2b。 我最終可能會有更多列和大量行 - 所以任何javascript循環方法都太慢了，無法在我測試時使用。

唯一似乎足夠快的方法是設置一些像這樣的css：

table.hide1 .col1 { display: none; }
table.hide2 .col2 { display: none; }
table.hide3 .col3 { display: none; }

table.show1 .col1 { display: table-cell; }
table.show2 .col2 { display: table-cell; }
table.show3 .col3 { display: table-cell; }

然后在將觸發切換的表頭單元格上設置onClick函數調用 - 並確定將“mytable”設置為哪個css類將創建我正在尋找的切換效果。 有沒有一種簡單的方法來設置它，以便代碼可以適用於n＃列？

更新

這就是我提出的，效果很好 - 而且非常快。 如果您能想出改進方法，請告訴我。

CSS

.col1 {display: none; }
.col2 {display: none; }
.col3 {display: none; }

table.show1 .col1 { display: table-cell; }
table.show2 .col2 { display: table-cell; }
table.show3 .col3 { display: table-cell; }

使用Javascript

function toggleColumn(n) {
    var currentClass = document.getElementById("mytable").className;
    if (currentClass.indexOf("show"+n) != -1) {
        document.getElementById("mytable").className = currentClass.replace("show"+n, "");
    }
    else {
        document.getElementById("mytable").className += " " + "show"+n;
    }
}

和HTML代碼段：

<table id="mytable">
<tr>
    <th onclick="toggleColumn(1)">Col 1 = A + B + C</th>
    <th class="col1">A</th>
    <th class="col1">B</th>
    <th class="col1">C</th>
    <th onclick="toggleColumn(2)">Col 2 = D + E + F</th>
    <th class="col2">D</th>
    <th class="col2">E</th>
    <th class="col2">F</th>
    <th onclick="toggleColumn(3)">Col 3 = G + H + I</th>
    <th class="col3">G</th>
    <th class="col3">H</th>
    <th class="col3">I</th>
</tr>
<tr>
    <td>20</td>
    <td class="col1">10</td>
    <td class="col1">10</td>
    <td class="col1">0</td>
    <td>20</td>
    <td class="col2">10</td>
    <td class="col2">8</td>
    <td class="col2">2</td>
    <td>20</td>
    <td class="col3">10</td>
    <td class="col3">8</td>
    <td class="col3">2</td>
</tr>
</table>

Answer 1

使用jQuery的一行代碼：

$('td:nth-child(2)').hide();

// If your table has header(th), use this:
//$('td:nth-child(2),th:nth-child(2)').hide();

來源： 使用單行jQuery代碼隱藏表列

Answer 2

不，這就是它。 從理論上講，您可以使用visibility: collapse在某些<col>上進行visibility: collapse來執行此操作，但瀏覽器支持並不是全部。

為了改進你所擁有的內容，可以使用table-layout: fixed在<table>上table-layout: fixed ，以允許瀏覽器使用更簡單，更快速，更可預測的固定表格布局算法。 您也可以刪除.show規則，因為當一個單元格沒有display: none .hide規則它會自動display: table-cell 。 允許表顯示恢復為默認值而不是顯式設置它可以避免IE <8中的問題，其中不支持表顯示值。

Answer 3

如果你正在尋找一個簡單的列隱藏，你也可以使用：nth-​​child選擇器。

#tableid tr td:nth-child(3),
#tableid tr th:nth-child(3) {
    display: none;
}

我在@media標簽中使用它有時會在屏幕太窄時壓縮更寬的表格。

Answer 4

我不認為你可以做任何事情來避免你已經在做的事情，但是，如果你用javascript在客戶端上構建表，你總是可以動態地添加樣式規則，這樣你就可以允許任意數量的列沒有使用所有這些規則混亂你的css文件。 如果您不知道如何執行此操作，請參閱http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript 。

編輯：對於“粘性”切換，您應該只添加類名而不是替換它們。 例如，你可以給它一個類名“hide2 hide3”等。我不認為你真的需要“show”類，因為那將是默認的。 像jQuery這樣的庫讓這很容易，但是在沒有的情況下，這樣的函數可能會有所幫助：

var modifyClassName = function (elem, add, string) {
var s = (elem.className) ? elem.className : "";
var a = s.split(" ");
if (add) {
  for (var i=0; i<a.length; i++) {
      if (a[i] == string) {
          return;
          }
      }
  s += " " + string;
  }
else {
    s = "";
    for (var i=0; i<a.length; i++) {
        if (a[i] != string)
            s += a[i] + " "; 
        }
    }
elem.className = s;
}