Last updated on May 25th, 2016 at 04:13 pm
Show Hide table columns using Javascript
Usually we end up creating large table which will overflow the browser window especially when we have many columns. Users will be having difficulty in viewing the columns as it will be very big. They will need to scroll browser window horizontally in order to view all columns. This simple script will be very helpful to display large HTML tables with lot of columns that will not fit in a normal browser screen. You can choose to hide/show columns with ease using javascript. I have also included some CSS styling on the table.
I am using CSS display property ‘NONE’ to hide columns and for showing them i used ‘TABLE-CELL’ property instead of ‘block’ as the latter might have some issues while displaying hidden columns especially when you have added style to the table.
You can modify the code below to hide specific columns by simply giving column number from which you need to start hiding. For example if you have 17 columns and you need to hide from 9th one, Just give variable column_hide_from as 9. The script will automatically hide columns starting from the 9th .
It is up to the user whether they need to see the whole table or just part of it, In order to display the complete table all you have to do is click on the button with the name SHOW. This will call the javascript function named show_me() and display the columns accordingly. If you need to hide columns again then click on button with name HIDE and that will in turn call function hide_me().
You can find sample HTML CSS table below along with a button., And onload we are loading javascript function to hide the columns inside table automatically when page loads.
<html>
<title>Display large table using html and hide columns using javascript</title>
<a href="" target=_blank>Go Back To Tutorial</a><p>
<style>
#users {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 100%;
border-collapse: collapse;
}
#users td, #users th {
font-size: 1em;
border: 1px solid #000;
padding: 3px 7px 2px 7px;
}
#users tr.alt td {
color: #000000;
background-color: #EAF2D3;
}
</style>
<body onload="hide_me()">
<table id ="users" style="width:100%">
<tr class="alt">
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr class="alt">
<td>Eve1</td>
<td>Jackson1</td>
<td>94</td>
<td>Jill1</td>
<td>Smith1</td>
<td>50</td>
</tr>
</table>
<input type="button" onclick="show_me()" value="Show">
<input type="button" onclick="hide_me()" value="Hide">
Make sure you add this javascript after the HTML code not before it., I have written 2 functions one to hide the table columns and other to show the columns.
<script>
var row=document.getElementById("users").rows.length;
var col=document.getElementById("users").rows[1].cells.length;
var i,j;
var column_hide_from = 4;
function hide_me()
{
for (i=0;i<row;i++)
{
for (j=column_hide_from;j<col;j++)
{
//console.log("I is "+i+" J is "+j)
//console.log(document.getElementById("users").rows[i].cells[j].innerHTML)
document.getElementById("users").rows[i].cells[j].style.display = "none";
}
}
}
function show_me()
{
for (i=0;i<row;i++)
{
for (j=4;j<col;j++)
{
//console.log("I is "+i+" J is "+j)
//console.log(document.getElementById("users").rows[i].cells[j].innerHTML)
document.getElementById("users").rows[i].cells[j].style.display = "table-cell";
}
}
}
//alert("Number of rows "+row+" Number of columns "+col)
//alert(document.getElementById("users").rows[1].cells[12].innerHTML)
//document.getElementById("users").rows[1].cells[12].style.display = "none";
</script>
I have commented console.log statement, if you want to do some troubleshooting enable them and run it on Chrom/Mozilla where Firebug addon is installed.
NOTE:- If you run the code with console.log statement enabled in Internet Explorer then you might see some error as this function is not defined in IE.
Please find the complete code below
<html>
<title>Display large table using html and hide columns using javascript</title>
<a href="" target=_blank>Go Back To Tutorial</a><p>
<style>
#users {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 100%;
border-collapse: collapse;
}
#users td, #users th {
font-size: 1em;
border: 1px solid #000;
padding: 3px 7px 2px 7px;
}
#users tr.alt td {
color: #000000;
background-color: #EAF2D3;
}
</style>
<body onload="hide_me()">
<table id ="users" style="width:100%">
<tr class="alt">
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr class="alt">
<td>Eve1</td>
<td>Jackson1</td>
<td>94</td>
<td>Jill1</td>
<td>Smith1</td>
<td>50</td>
</tr>
</table>
<input type="button" onclick="show_me()" value="Show">
<input type="button" onclick="hide_me()" value="Hide">
<script>
var row=document.getElementById("users").rows.length;
var col=document.getElementById("users").rows[1].cells.length;
var column_hide_from = 4;
function hide_me()
{
for (i=0;i<row;i++)
{
for (j=column_hide_from;j<col;j++)
{
//console.log("I is "+i+" J is "+j)
//console.log(document.getElementById("users").rows[i].cells[j].innerHTML)
document.getElementById("users").rows[i].cells[j].style.display = "none";
}
}
}
function show_me()
{
for (i=0;i<row;i++)
{
for (j=4;j<col;j++)
{
//console.log("I is "+i+" J is "+j)
//console.log(document.getElementById("users").rows[i].cells[j].innerHTML)
document.getElementById("users").rows[i].cells[j].style.display = "table-cell";
}
}
}
//alert("Number of rows "+row+" Number of columns "+col)
//alert(document.getElementById("users").rows[1].cells[12].innerHTML)
//document.getElementById("users").rows[1].cells[12].style.display = "none";
</script>
</body>
</html>
admin