html表格显示列与隐藏列_在宽表上隐藏/显示HTML表格列

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 supportedvar 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 supportedvar 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)">&nbsp;</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)">&nbsp;</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)">&nbsp;</td></tr><tr><td class="cc1">Row 1</td><td class="cg1">Row 1</td><td class="cg1">Row 1</td><td class="ct1">&nbsp;</td><td class="cg2">Row 1</td><td class="cg2">Row 1</td><td class="ct2">&nbsp;</td><td class="cg3">Row 1</td><td class="cg3">Row 1</td><td class="ct3">&nbsp;</td>                </tr><tr><td class="cc1">Row 2</td><td class="cg1">Row 2</td><td class="cg1">Row 2</td><td class="ct1">&nbsp;</td><td class="cg2">Row 2</td><td class="cg2">Row 2</td><td class="ct2">&nbsp;</td><td class="cg3">Row 2</td><td class="cg3">Row 2</td><td class="ct3">&nbsp;</td>              </tr><tr><td class="cc1">Row 3</td><td class="cg1">Row 3</td><td class="cg1">Row 3</td><td class="ct1">&nbsp;</td><td class="cg2">Row 3</td><td class="cg2">Row 3</td><td class="ct2">&nbsp;</td><td class="cg3">Row 3</td><td class="cg3">Row 3</td><td class="ct3">&nbsp;</td>              </tr></table></body>
</html>

翻译自: https://www.experts-exchange.com/articles/1692/Hiding-displaying-HTML-table-columns-on-wide-tables.html

html表格显示列与隐藏列

html表格显示列与隐藏列_在宽表上隐藏/显示HTML表格列相关推荐

mysql选取除某一列的所有行_在 MySQL 中选择除了某一列以外的所有列
在 MySQL 中选择除了某一列以外的所有列 2020 年 1 月 23 日,由 Robert Gravelle 撰写 SQL通过SELECT *(SELECT ALL)子句使选择表中的所有字段变得非 ...
hive 行转列和列转行的方法_面试常考！SQL行转列和列转行
关注上方"数据挖掘工程师",选择星标,关键时间,第一时间送达!行转列,列转行是我们在开发过程中经常碰到的问题.行转列一般通过CASE WHEN 语句来实现,也可以通过 SQL SE ...
泛微e9隐藏明细表_泛微E8 隐藏行、明细表
jQuery(document).ready(function() { //绑定值变更事件,支持所有浏览器,请不要使用 onpropertyChange 事件进行绑定. jQuery("#f ...
苹果xr十大隐藏功能_苹果手机有哪些隐藏小功能？【建议收藏】
大家好,我是:玩机小公举专注于分享各种玩机技巧.文章纯手动,还配上了精美配图. 花了一天时间写了这篇回答,帮大家整理了iPhone 手机隐藏极深的15个小功能,个个实用. 1.批量删除消息在[信息 ...
安卓隐藏摄像_一款可以隐藏录像的app
一款可以隐藏录像的app是一款专业的屏幕录制软件,一款可以隐藏录像的app可以帮助用户方便又快捷的录制屏幕视频,一款可以隐藏录像的app还提供悬浮窗功能,能够自由控制软件开始录屏和结束录屏. 软件介绍 ...
qdialog隐藏关闭按钮_相见恨晚的 iPhone 隐藏技巧
今天就帮大家整理收录了 30 个 iPhone 隐藏使用技巧,希望对你有用.其他有关手机使用方面的问题,也欢迎在评论区提问或分享- iCloud 钥匙串:1 秒输入任何平台的账号密码账号密码超多容易 ...
emoji隐藏表情_敢表态不隐藏！REEBOK REEmoji 系列秒变“行走的表情包”
什么是Z世代最流行的全球通用语言?当然是万能的表情包!Reebok锐步于10月推出全新REEmoji系列,将social达人必备的表情包注入两大经典鞋款Instapump Fury和Club C.大胆 ...
显示文字_在 iPhone 上调整显示与文字大小，让眼睛更舒服
刚开始写这个系列文章的时候,不少朋友都建议我,如果要给中老年人看,字号一定要大大大.其实比较最初的文章,我们的确调整过字号的大小,不过终究还是定在了目前的正文 17 号字上. 从某种角度而言,我们也希 ...
iphone原彩显示对眼睛好吗_在 iPhone 上调整显示与文字大小，让眼睛更舒服
刚开始写这个专栏的时候,不少朋友都建议我,如果要给中老年人看,字号一定要大大大.其实比较最初的文章,我们的确调整过字号的大小,不过终究还是定在了目前的正文 17 号字上. 从某种角度而言,我们也希望文 ...

html表格显示列与隐藏列_在宽表上隐藏/显示HTML表格列

html表格显示列与隐藏列_在宽表上隐藏/显示HTML表格列相关推荐

最新文章

热门文章