[英]show/hide html table columns using css
我想显示一个带控件的基本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>
使用jQuery的一行代码:
$('td:nth-child(2)').hide();
// If your table has header(th), use this:
//$('td:nth-child(2),th:nth-child(2)').hide();
来源: 使用单行jQuery代码隐藏表列
不,这就是它。 从理论上讲,您可以使用visibility: collapse
在某些<col>
上进行visibility: collapse
来执行此操作,但浏览器支持并不是全部。
为了改进你所拥有的内容,可以使用table-layout: fixed
在<table>
上table-layout: fixed
,以允许浏览器使用更简单,更快速,更可预测的固定表格布局算法。 您也可以删除.show
规则,因为当一个单元格没有display: none
.hide
规则它会自动display: table-cell
。 允许表显示恢复为默认值而不是显式设置它可以避免IE <8中的问题,其中不支持表显示值。
如果你正在寻找一个简单的列隐藏,你也可以使用:nth-child选择器。
#tableid tr td:nth-child(3),
#tableid tr th:nth-child(3) {
display: none;
}
我在@media标签中使用它有时会在屏幕太窄时压缩更宽的表格。
我不认为你可以做任何事情来避免你已经在做的事情,但是,如果你用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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.