使用 css 显示/隐藏 html 表格列 [英] show/hide html table columns using css
问题描述
我想显示一个基本的 html 表格，其中包含切换显示/隐藏附加列的控件:
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>
所以第 1 列和第 2 列将是默认显示的唯一列 - 但是当您单击第 1 列时，我希望 1a 和 1b 切换，与第 2 列和 2a 和 2b 相同.我最终可能会得到更多的列和很多行 - 所以在我测试时，任何 javascript 循环方法都太慢而无法使用.
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.
似乎足够快的唯一方法是像这样设置一些 css:
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; }
然后在将触发切换的表标题单元格上设置 onClick 函数调用 - 并确定将mytable"设置为哪个 css 类将创建我正在寻找的切换效果.有没有一种简单的方法来设置它，以便代码可以用于 n # 列?
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?
这是我想出来的，效果很好 - 而且速度非常快.如果您能想出改进的方法，请告诉我.
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;
}
}
还有 html 片段:
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>
推荐答案
不，仅此而已.理论上你可以使用 visibility: collapse 在某些 <col> s 上执行此操作，但浏览器支持并非全部.
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 这篇关于使用 css 显示/隐藏 html 表格列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ 上使用
table-layout: fixed 来让浏览器使用更简单、更快的和更可预测的固定表布局算法.您还可以删除 .show 规则，因为当单元格没有通过 .hide 规则display: none 时，它会自动成为 <代码>显示:表格单元.允许表格显示恢复为默认值而不是明确设置它可以避免 IE<8 中不支持表格显示值的问题.
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.
登录
关闭
