我想显示一个带控件的基本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 …
复制/粘贴此html代码段并在IE7中试用.当您切换隐藏的列时,它会在列之间留下空隙.在Firefox中它工作正常,列最小化时触摸.还没有尝试IE8,很想知道它是如何工作的.有任何想法吗？我在CSS中尝试了很多东西,比如table-layout:修复但没有运气.
注意:不寻找不同的切换方法,因为我正在处理的表是50+列宽和4000+行,因此循环/ jquery技术太慢.
这是代码 - 如果有人可以重新发布它的工作版本,我会立即给他们支票并永远负债!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>
function toggle() {
var tableobj = document.getElementById("mytable");
if (tableobj.className == "") {
tableobj.className = "hide1 hide2";
}
else {
tableobj.className = "";
}
}
</script>
<style>
table { border-collapse: collapse; }
td, th { border: 1px solid silver; }
.hide1 .col1 { display: none; }
.hide2 .col2 { display: none; }
</style>
</head>
<body>
<input type="button" value="toggle" onclick="toggle();" />
<table id="mytable">
<tr>
<th>A</th>
<th …