Created
March 18, 2016 12:43
-
-
Save ststeiger/65e608cc4c5bd3740953 to your computer and use it in GitHub Desktop.
Hide multiple columns in HTML table
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | |
| <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="cache-control" content="max-age=0" /> | |
| <meta http-equiv="cache-control" content="no-cache" /> | |
| <meta http-equiv="expires" content="0" /> | |
| <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> | |
| <meta http-equiv="pragma" content="no-cache" /> | |
| <meta name="robots" content="index, follow" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <meta name="google" content="notranslate" /> | |
| <title>Test ColumnToggle</title> | |
| <meta name="author" content="Steve Urcle" /> | |
| <meta name="description" content="Testing table-column toggle functionality" /> | |
| <meta name="keywords" content=""> | |
| <meta name="copyright" content=""> | |
| <!-- | |
| http://htmlshell.com/ | |
| https://github.com/sanusart/html-now | |
| https://sanusart.github.io/html-now/ | |
| --> | |
| <!-- | |
| <link rel='stylesheet' href='//fonts.googleapis.com/css?family=font1|font2|etc' type='text/css' /> | |
| <link rel="stylesheet" href="css/styles.css?v=1.0" /> | |
| <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
| <link rel="icon" type="image/x-icon" href="http://fj.about.com/icons/2.4.3/icons/compute/favicon.ico" /> | |
| --> | |
| <style title="mysheet" type="text/css" media="all"> | |
| table | |
| { | |
| border-collapse: collapse; | |
| border: 3px solid silver; | |
| } | |
| .mytd | |
| { | |
| border: 1px solid black; | |
| } | |
| .tblhead | |
| { | |
| background-color: black; | |
| font-weight: bold; | |
| color: white; | |
| border: 1px solid hotpink; | |
| } | |
| /* | |
| td:nth-child(2) | |
| { | |
| background-color: hotpink; | |
| #display:none; | |
| } | |
| */ | |
| </style> | |
| <script type="text/javascript"> | |
| function getCSSRule(ruleName) | |
| { // Return requested style obejct | |
| ruleName = ruleName.toLowerCase(); // Convert test string to lower case. | |
| // All styles are lowercase ??? | |
| var styleSheet; | |
| var i, ii; | |
| var cssRule = false; // Initialize cssRule. | |
| var cssRules; | |
| if (document.styleSheets) | |
| { // If browser can play with stylesheets | |
| for (i = 0; i < document.styleSheets.length; i++) | |
| { // For each stylesheet | |
| styleSheet = document.styleSheets[i]; | |
| if (!styleSheet.href) | |
| { | |
| if (styleSheet.cssRules) | |
| { // Browser uses cssRules? | |
| cssRules = styleSheet.cssRules; // Yes --Mozilla Style | |
| } else | |
| { // Browser uses rules? | |
| cssRules = styleSheet.rules; // Yes IE style. | |
| } // End IE check. | |
| if (cssRules) | |
| { | |
| for (ii = 0; ii < cssRules.length; ii++) | |
| { | |
| cssRule = cssRules[ii]; | |
| if (cssRule) | |
| { // If we found a rule... | |
| // console.log(cssRule); | |
| if (cssRule.selectorText) | |
| { | |
| // console.log(cssRule.selectorText); | |
| if (cssRule.selectorText.toLowerCase() == ruleName) | |
| { // match ruleName? | |
| return cssRule; // return the style object. | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| return null; | |
| } | |
| function getStyleSheet(unique_title) | |
| { | |
| for (var i = 0; i < document.styleSheets.length; i++) | |
| { | |
| var sheet = document.styleSheets[i]; | |
| if (sheet.title == unique_title) | |
| { | |
| return sheet; | |
| } | |
| } | |
| } | |
| // Return requested style obejct | |
| function getCSSRuleFromStylesheet(styleSheet, ruleName) | |
| { | |
| if (styleSheet === null || ruleName === null) | |
| return null; | |
| ruleName = ruleName.toLowerCase(); // Convert test string to lower case. | |
| // All styles are lowercase ??? | |
| var cssRules; | |
| var i; | |
| var cssRule = null; // Initialize cssRule. | |
| if (styleSheet.cssRules) | |
| { // Browser uses cssRules? | |
| cssRules = styleSheet.cssRules; // Yes --Mozilla Style | |
| } else | |
| { // Browser uses rules? | |
| cssRules = styleSheet.rules; // Yes IE style. | |
| } // End IE check. | |
| if (cssRules) | |
| { | |
| for (i = 0; i < cssRules.length; i++) | |
| { | |
| cssRule = cssRules[i]; | |
| if (cssRule) | |
| { // If we found a rule... | |
| // console.log(cssRule); | |
| if (cssRule.selectorText) | |
| { | |
| // console.log(cssRule.selectorText); | |
| if (cssRule.selectorText.toLowerCase() === ruleName) | |
| { // match ruleName? | |
| return cssRule; // return the style object. | |
| } | |
| } | |
| } | |
| } | |
| } | |
| return null; | |
| } | |
| function deleteStyleRule(ruleName) | |
| { | |
| ruleName = ruleName.toLowerCase(); // Convert test string to lower case. | |
| // All styles are lowercase ??? | |
| var mysheet = getStyleSheet("mysheet"); // document.styleSheets[0]; | |
| var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules; | |
| if(mysheet.removeRule && !mysheet.deleteRule) | |
| mysheet.deleteRule = mysheet.removeRule; // deleteRule: W3C; removeRule: IE | |
| for (i = 0; i < myrules.length; i++) | |
| { | |
| //if (myrules[i].selectorText.toLowerCase().indexOf("#test") != -1) | |
| if (myrules[i].selectorText !== null && myrules[i].selectorText.toLowerCase() === ruleName) | |
| { | |
| mysheet.deleteRule(i); | |
| // break; // Multiple occurences of CSS-class... | |
| i-- //decrement i by 1, since deleting a rule collapses the array by 1 | |
| } | |
| } | |
| } | |
| function toggleColumn(colClass) | |
| { | |
| // console.log(colClass); | |
| var ruleName = "." + colClass; | |
| var eles = document.getElementsByClassName(colClass); | |
| if (eles.length === 0) | |
| return; | |
| var computedStyle = getComputedStyle(eles[0], null); | |
| // console.log(computedStyle.display); // computedStyle.getPropertyValue("margin"); | |
| var styleSheet = getStyleSheet("mysheet"); | |
| var myrule = getCSSRuleFromStylesheet(styleSheet, ruleName); | |
| // https://davidwalsh.name/add-rules-stylesheets | |
| if (!myrule) | |
| { | |
| if (computedStyle.display === "none") | |
| styleSheet.insertRule(ruleName + " { display: table-cell;}", styleSheet.cssRules.length); | |
| else | |
| styleSheet.insertRule(ruleName + " { display: none;}", styleSheet.cssRules.length); | |
| } | |
| else | |
| { | |
| if (computedStyle.display === "none") | |
| myrule.style.display = "table-cell"; | |
| else | |
| myrule.style.display = "none"; | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <table> | |
| <tr> | |
| <td class="tblhead col1">Column 1</td> | |
| <!-- | |
| <td class="tblhead col2">Column 2</td> | |
| <td class="tblhead col3">Column 3</td> | |
| --> | |
| <td class="tblhead col2" colspan="2">Column 2</td> | |
| <!-- | |
| --> | |
| <td class="tblhead col4">Column 4</td> | |
| </tr> | |
| <tr> | |
| <td class="mytd col1">Row 1 Column 1</td> | |
| <td class="mytd col2">Row 1 Column 2</td> | |
| <td class="mytd col3">Row 1 Column 3</td> | |
| <td class="mytd col4">Row 1 Column 4</td> | |
| </tr> | |
| <tr> | |
| <td class="mytd col1">Row 2 Column 1</td> | |
| <td class="mytd col2">Row 2 Column 2</td> | |
| <td class="mytd col3">Row 2 Column 3</td> | |
| <td class="mytd col4">Row 2 Column 4</td> | |
| </tr> | |
| <tr> | |
| <td class="mytd col1">Row 3 Column 1</td> | |
| <td class="mytd col2">Row 3 Column 2</td> | |
| <td class="mytd col3">Row 3 Column 3</td> | |
| <td class="mytd col4">Row 3 Column 4</td> | |
| </tr> | |
| <tr> | |
| <td class="mytd col1">Row 4 Column 1</td> | |
| <td class="mytd col2">Row 4 Column 2</td> | |
| <td class="mytd col3">Row 4 Column 3</td> | |
| <td class="mytd col4">Row 4 Column 4</td> | |
| </tr> | |
| </table> | |
| <br /><br /><br /><br /> | |
| <input type="button" value="OK" onclick="toggleColumn('col2'); toggleColumn('col3');" /> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment