html表格显示列与隐藏列
I was recently asked to create an report based on an HTML table. The report needed to contain many more columns than could be displayed across the page, but they would all be needed.
最近有人要求我根据HTML表创建报告。 该报告需要包含的列数比该页面上显示的列数还多，但是将需要全部这些列。
Fortunately, it was possible to group the columns of data into related subjects that would be viewed altogether or not at all.
幸运的是，有可能将数据列分组为相关主题，这些主题将被完全查看或根本不会查看。
I needed a simple way of hiding or displaying the groups of columns, that would also indicate that there was a hidden group of columns that was available for display.
我需要一种简单的方法来隐藏或显示列组，这也将表明存在可供显示的隐藏列组。
My solution looks like the screen shot below.
我的解决方案如下图所示。
Column group1 & 3 are both expanded, Group 2 is collapsed, indicated by the narrow blue column.
列组1和3均已展开，组2折叠，如蓝色窄列所示。
The ‘ID’ column is a fixed column that is always present
“ ID”列是始终存在的固定列
To expand Group 2, or collapse Group 1 and 3, it is simply necessary to double click in one of the header cells
要展开组2或折叠组1和3，只需双击其中一个标题单元格
// This value is updated when the document is loaded is inline-table style is not supported
var showStyle = "inline-table";
function expcoll(cell) {
var className = cell.className;
var classType = className.substr(0, 2);
var classID = className.substr(2);
var ctrlClass = ((classType == "ct") ? "cg" : "ct") + classID;
$("." + className).css("display", "none");
$("." + ctrlClass).css("display", showStyle);
}
function cssTest() {
// inline-table doesn't work properly in IE8 (and presumably older versions)
// The data columns get hidden, but the control columns don't appear.
// I suspect this style is not recognised at all, and is ignored when it is seen in the default style sheet
// Just using 'inline' breaks the table in Firefox and Opera -
// the cell widths shrink to the minimum size required to show the contents
// If inline-table is not supported (as with IE) the initial style is 'block', so use 'inline' instead of 'inline-table'
if ($("#testCell").css("display") == "block") showStyle = "inline";
}
This function parses the CSS class name of the cell that has been double-clicked. All the cells in the column need the same class name. The first two letters of the class name indicate the column type – ‘cg’ is a column group, ‘ct’ is a control column (displayed when the other columns are hidden). Whatever letters you choose, use the same number of letters for each type, as this simplifies parsing the name.
此函数解析已双击的单元格CSS类名称。 列中的所有单元格都需要相同的类名。 类名的前两个字母表示列类型-‘cg’是列组，’ct’是控制列（其他列隐藏时显示）。 无论选择哪种字母，每种类型都使用相同数量的字母，因为这样可以简化名称解析。
The rest of the class name is the column group number. So, each group will have a number of columns with a class cg1 (for example) and one control column ct1
类名称的其余部分是列组号。 因此，每个组将具有许多列，这些列具有一个类cg1（例如）和一个控制列ct1
The function uses JQuery to get a reference to all the cells with the selected class name, and hides them. It then gets a reference to all the columns with the other class name (cg or ct) and makes them visible.
该函数使用JQuery来获取对具有所选类名的所有单元格的引用，并将其隐藏。 然后，它获得对具有其他类名（cg或ct）的所有列的引用，并使它们可见。
IE does not seem to support ‘inline-table’ as an option for the ‘display’ style. Rather than clumsy user-agent parsing to detect support, I’ve developed a way of detecting CSS support. See my related tutorial Detecting cross browser CSS style support
IE似乎不支持将“内联表”作为“显示”样式的选项。 我没有笨拙的用户代理解析来检测支持，而是开发了一种检测CSS支持的方法。 请参阅我的相关教程“ 检测跨浏览器CSS样式支持”
You will need to download JQuery to make it work.
您将需要下载JQuery才能使其工作。
(JQuery is a JavaScript library; it is “… a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.”)
（JQuery是一个JavaScript库；它是“ …一个快速简洁JavaScript库，可简化HTML文档的遍历，事件处理，动画和Ajax交互，以实现快速的Web开发。”）
Complete solution:
完整的解决方案：
<html>
<head>
<style type="text/css">
table td
{
border:solid 1px black;
border-collapse:collapse;
padding: 1px;
}
.cc1 {
width:150px;
background-color:LightBlue;
display:inline-table;
}
.cg1 {
width:150px;
background-color:LightGreen;
display:inline-table;
}
.cg2 {
width:150px;
background-color:LightSkyBlue;
display:inline-table;
}
.cg3 {
width:150px;
background-color:LightSeaGreen;
display:inline-table;
}
.ct1 {
width:10px;
display:none;
background-color:LightGreen;
}
.ct2 {
width:10px;
display:none;
background-color:LightSkyBlue;
}
.ct3 {
width:10px;
display:none;
background-color:LightSeaGreen;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
// This value is updated when the document is loaded is inline-table style is not supported
var showStyle = "inline-table";
function expcoll(cell) {
var className = cell.className;
var classType = className.substr(0, 2);
var classID = className.substr(2);
var ctrlClass = ((classType == "ct") ? "cg" : "ct") + classID;
$("." + className).css("display", "none");
$("." + ctrlClass).css("display", showStyle);
}
function cssTest() {
// inline-table doesn't work properly in IE8 (and presumably older versions)
// The data columns get hidden, but the control columns don't appear.
// I suspect this style is not recognised at all, and is ignored when it is seen in the default style sheet
// Just using 'inline' breaks the table in Firefox and Opera -
// the cell widths shrink to the minimum size required to show the contents
// If inline-table is not supported (as with IE) the initial style is 'block', so use 'inline' instead of 'inline-table'
if ($("#testCell").css("display") == "block") showStyle = "inline";
}
</script>
</head>
<body onload="cssTest()">
<table>
<tr>
<td class="cc1">ID</td>
<td class="cg1" ondblclick="expcoll(this)" id="testCell">Group 1</td>
<td class="cg1" ondblclick="expcoll(this)">Group 1</td>
<td class="ct1" ondblclick="expcoll(this)"> </td>
<td class="cg2" ondblclick="expcoll(this)">Group 2</td>
<td class="cg2" ondblclick="expcoll(this)">Group 2</td>
<td class="ct2" ondblclick="expcoll(this)"> </td>
<td class="cg3" ondblclick="expcoll(this)">Group 3</td>
<td class="cg3" ondblclick="expcoll(this)">Group 3</td>
<td class="ct3" ondblclick="expcoll(this)"> </td>
</tr>
<tr>
<td class="cc1">Row 1</td>
<td class="cg1">Row 1</td>
<td class="cg1">Row 1</td>
<td class="ct1"> </td>
<td class="cg2">Row 1</td>
<td class="cg2">Row 1</td>
<td class="ct2"> </td>
<td class="cg3">Row 1</td>
<td class="cg3">Row 1</td>
<td class="ct3"> </td>
</tr>
<tr>
<td class="cc1">Row 2</td>
<td class="cg1">Row 2</td>
<td class="cg1">Row 2</td>
<td class="ct1"> </td>
<td class="cg2">Row 2</td>
<td class="cg2">Row 2</td>
<td class="ct2"> </td>
<td class="cg3">Row 2</td>
<td class="cg3">Row 2</td>
<td class="ct3"> </td>
</tr>
<tr>
<td class="cc1">Row 3</td>
<td class="cg1">Row 3</td>
<td class="cg1">Row 3</td>
<td class="ct1"> </td>
<td class="cg2">Row 3</td>
<td class="cg2">Row 3</td>
<td class="ct2"> </td>
<td class="cg3">Row 3</td>
<td class="cg3">Row 3</td>
<td class="ct3"> </td>
</tr>
</table>
</body>
</html>
html表格显示列与隐藏列
