I want to display a basic html table with controls to toggle showing/hiding of additional columns:
<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>
So Column 1 and Column 2 will be the only columns displayed by default - but when you click on the Column 1 I want 1a and 1b to toggle, and same with Column 2 with 2a and 2b. I may end up with more columns and lots of rows - so any javascript looping approaches have been too slow to work with when I tested.
The only approach that seems to be fast enough is to set up some css like this:
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; }
And then set up onClick function calls on the table header cells that will trigger a toggle - and determine which css class to set "mytable" to that will create the toggle effect that I'm looking for. Is there an easy way to set this up so that the code can work for n # of columns?
Here is what I came up with, works great - and really fast. Let me know if you can think of ways to improve.
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; } }
And the html snippet:
<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>
If you simply want to enable the users to hide the columns, just initiate the plug-in in the <script> section. The plug-in will add a cross “button” in each column's header. If you want to display buttons to show the hidden columns then simply add a <div> with a specific class as shown in the demo below.
To hide a column entirely from view, meaning it will not be displayed in either the normal or details row, simply use the visible column option and set it to false . This example shows a table where the first column ID is completely hidden from view using the data-visible column attribute.
You can use . hideFullColumn in the table and use . hidecol in the tag which you want to hide. You don't need to worry about td as those will automatically be hidden.
Usually, to hide an element from view, you use the 'display' property and set it to 'none'. But CSS also has a property called 'visibility', which hides elements in a different way. In particular, we use 'visibility: collapse' here, which is designed especially for hiding table columns and rows.
One line of code using jQuery:
$('td:nth-child(2)').hide(); // If your table has header(th), use this: //$('td:nth-child(2),th:nth-child(2)').hide();
Source: Hide a Table Column with a Single line of jQuery code
No, that's pretty much it. In theory you could use visibility: collapse
on some <col>
s to do it, but browser support isn't all there.
To improve what you've got slightly, you could use table-layout: fixed
on the <table>
to allow the browser to use the simpler, faster and more predictable fixed-table-layout algorithm. You could also drop the .show
rules as when a cell isn't made display: none
by a .hide
rule it will automatically be display: table-cell
. Allowing table display to revert to default rather than setting it explicitly avoids problems in IE<8, where the table display values are not supported.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With