logo标签列表

使用CSS显示/隐藏HTML表格列

javascripthtmlcsshtml-table
38

我想显示一个基本的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>
好的，看起来没有其他方法可以做到这一点 - 但是有没有一种方法可以使它成为“粘性”切换？现在，每次我显示一列时，另一列正在显示的列就会进入隐藏状态。我想我必须添加CSS规则来专门处理每个排列组合吗？希望不是...如果我要处理5个显示/隐藏列，那将不会很有趣。 - Art Peterson
1
嗯，IE7不喜欢我发布的解决方案。我可以让它在所有列默认显示的情况下工作，但不能默认隐藏... - Art Peterson
您可以添加多个类：table.className= 'show1 show3'等。我怀疑IE的问题是，正如我所提到的，它不支持display: table-cell。我会使用类似于hide的类，而不是show，这样您只需要声明table.hide1 col1 { display: none; }。 - bobince
4个回答
35

使用jQuery的一行代码：

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

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

来源： 使用单行jQuery代码隐藏表格列

1
谢谢！当您尝试为打印样式表隐藏某些列时，此选择器也非常有效。 - ThatAintWorking
1
在尝试使用Chrome中无法正常工作的<col>标签之后，这种方法完美地解决了问题。 - Nick.McDermaid
请注意，这仅适用于每行具有相等单元格数量的表。例如，如果您有一些带有colspan="2"的单元格，并且在该行的其余单元格较少，则nth-child将选择（并在此情况下隐藏）来自错误“列”的单元格。因此，请确保在表格将被编辑的位置旁边记下/注释您的列隐藏机制，以便未来的编辑者不会破坏布局。 - iono
21

不，那就是全部了。理论上，你可以在一些<col>标签上使用visibility: collapse来实现，但浏览器的支持并不完整。

为了稍微提升你现有的解决方案，你可以在<table>标签上使用table-layout: fixed属性，以便让浏览器使用更简单、更快速和更可预测的固定表格布局算法。你还可以删除.show规则，因为如果一个单元格没有被.hide规则设置成display: none，它会自动变成display: table-cell。允许表格显示恢复到默认值而不是显式地设置它可以避免在IE<8中出现问题，因为这些浏览器不支持表格显示属性值。

4
感谢提到table-layout:fixed。我发现在显示表格格式数据时，这对我非常有帮助。 - NotMe
感谢提出table-layout:fixed，但在我的情况下它没有起作用。处理具有波动列大小的大型表格，最终需要table-layout:auto才能呈现出漂亮的外观。 - Art Peterson
这太遗憾了。 固定表格可以比自动表格更平滑。（“固定”并不一定意味着所有列都必须具有固定宽度，只是宽度不取决于每个单元格中的内容数量。） - bobince
https://dev59.com/hG_Xa4cB1Zd3GeqP59-t - Sednus
15

如果您正在寻找一种简单的列隐藏方法，也可以使用:nth-child选择器。

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

有时候我会在 @media 标签中使用这个，以便在屏幕过窄时压缩更宽的表格。

1

我认为你已经在做的事情是无法避免的，但是如果你正在使用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;
}
你的编辑帮了我很多！现在我看到这个粘性切换真的很容易！ - Art Peterson
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接