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();

来源：Hide a Table Column with a Single line of jQuery code

Answer 2

不，这就是它。从理论上讲，您可以在某些<col>上使用visibility: collapse来执行此操作，但浏览器支持并不是全部。

为了改善你所拥有的内容，可以在table-layout: fixed上使用<table>，以允许浏览器使用更简单，更快速，更可预测的固定表格布局算法。您还可以删除.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;
}

使用css显示/隐藏html表列

更新

4 个答案: