使用css显示/隐藏html表列 [英] show/hide html table columns using css

问题描述

我想显示一个带有控件的基本html表，以切换显示/隐藏其他列：

 < table id =mytable> 
< tr> 
< th>栏1< / th> 
< th class =col1> 1a< / th> 
< th class =col1> 1b< / th> 
< th>栏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函数调用，触发切换 - 其中css类设置mytable将创建切换效果，我正在寻找。

更新

p>这是我想出的，工作伟大，真的很快。让我知道您是否可以想办法改进。

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

 code> 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> 
  

解决方案

不，理论上，您可以使用 visibility：collapse < col> 上的code> ，但浏览器支持不是全部。

为了改善你的效果，你可以在< table>上使用 table-layout：fixed 允许浏览器使用更简单，更快速和更可预测的固定表格布局算法。您还可以删除 .show 规则，因为没有创建单元格 display：none 由一个 .hide 规则将自动为 display：table-cell 。允许表格显示恢复为默认值，而不是明确设置避免IE< 8中的问题，其中不支持表格显示值。

I want to display a basic html table with controls to toggle showing/hiding of additional columns:

<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>

So Column 1 and Column 2 will be the only columns displayed by default - but when you click on the Column 1 I want 1a and 1b to toggle, and same with Column 2 with 2a and 2b. I may end up with more columns and lots of rows - so any javascript looping approaches have been too slow to work with when I tested.

The only approach that seems to be fast enough is to set up some css like this:

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; }

And then set up onClick function calls on the table header cells that will trigger a toggle - and determine which css class to set "mytable" to that will create the toggle effect that I'm looking for. Is there an easy way to set this up so that the code can work for n # of columns?

Update

Here is what I came up with, works great - and really fast. Let me know if you can think of ways to improve.

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;
    }
}

And the html snippet:

<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>

解决方案

No, that's pretty much it. In theory you could use visibility: collapse on some <col>​s to do it, but browser support isn't all there.

To improve what you've got slightly, you could use table-layout: fixed on the <table> to allow the browser to use the simpler, faster and more predictable fixed-table-layout algorithm. You could also drop the .show rules as when a cell isn't made display: none by a .hide rule it will automatically be display: table-cell. Allowing table display to revert to default rather than setting it explicitly avoids problems in IE<8, where the table display values are not supported.

这篇关于使用css显示/隐藏html表列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！