how to show and hide Table Column Using HTML CSS JavaScript

In this article we discuss about how to show and hide Table Column Using HTML CSS JavaScript

lets take a look on JavaScript Defination

what is JavaScript?

JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.

What is even more exciting however is the functionality built on top of the client-side JavaScript language. So-called Application Programming Interfaces (APIs) provide you with extra superpowers to use in your JavaScript code.

APIs are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. They do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized screws, and then put them together to make a bookshelf.

how to show and hide Table Column Using HTML CSS JavaScript

The approach is to create a bunch of checkboxes that match the number of columns in the table, as well as assign the same class as that of the checkboxes to the header as well as cells of each column in the table.

When users check or uncheck the checkbox a table column will hide or show respectively. You may also like sort tables using jQuery.

HTML:


<div id="wrapper">

<div id="checkbox_div">
 <p>Show Hide Column</p>
 <li><input type="checkbox" value="hide" id="name_col" onchange="hide_show_table(this.id);">Name</li>
 <li><input type="checkbox" value="hide" id="age_col" onchange="hide_show_table(this.id);">Age</li>
 <li><input type="checkbox" value="hide" id="city_col" onchange="hide_show_table(this.id);">City</li>
</div>

<table id="employee_table" align="center" cellpadding=10>
<tr>
 <th>S.no</th>
 <th id="name_col_head">Name</th>
 <th id="age_col_head">Age</th>
 <th id="city_col_head">City</th>
</tr>

<tr>
 <td>1</td>
 <td class="name_col">Amit</td>
 <td class="age_col">26</td>
 <td class="city_col">Agra</td>
</tr>

<tr>
 <td>2</td>
 <td class="name_col">Rahul</td>
 <td class="age_col">22</td>
 <td class="city_col">Mumbai</td>
</tr>

<tr>
 <td>3</td>
 <td class="name_col">Manoj</td>
 <td class="age_col">31</td>
 <td class="city_col">Delhi</td>
</tr>

<tr>
 <td>4</td>
 <td class="name_col">Rashmi</td>
 <td class="age_col">25</td>
 <td class="city_col">Bhopal</td>
</tr>

<tr>
 <td>5</td>
 <td class="name_col">Shivam</td>
 <td class="age_col">23</td>
 <td class="city_col">Jaipur</td>
</tr>

</table>

</div>

CSS

body
{
 text-align:center;
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family:helvetica;
 background-color:#FA8258;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:995px;
}
#checkbox_div
{
 width:375px;
 margin-left:309px;
}
#checkbox_div p
{
 margin:5px;
 color:white;
 font-weight:bold;
 font-size:17px;
}
#checkbox_div li
{
 color:white;
 display:inline-block;
 margin:5px;
 font-size:17px;
 font-weight:bold;
}
#checkbox_div input[type="checkbox"]
{
 width:20px;
 height:20px;
}
#employee_table
{
 color:#FE642E;
 background-color:white;
 text-align:center;
}
#employee_table th
{
 border:1px dashed #FE642E;
}
#employee_table td
{
 min-width:70px;
 border:1px dashed #FE642E;
}

Javascript

function hide_show_table(col_name)
{
 var checkbox_val=document.getElementById(col_name).value;
 if(checkbox_val=="hide")
 {
  var all_col=document.getElementsByClassName(col_name);
  for(var i=0;i<all_col.length;i++)
  {
   all_col[i].style.display="none";
  }
  document.getElementById(col_name+"_head").style.display="none";
  document.getElementById(col_name).value="show";
 }
	
 else
 {
  var all_col=document.getElementsByClassName(col_name);
  for(var i=0;i<all_col.length;i++)
  {
   all_col[i].style.display="table-cell";
  }
  document.getElementById(col_name+"_head").style.display="table-cell";
  document.getElementById(col_name).value="hide";
 }
}

we create a table and add some sample data for further working and create 3 checkbox one for each type of table column to hide and show the respective table column. We create a function called ‘hide_show_table()‘ to hide and show table column in this function we get the value of checkbox when clicked and check if the value is ‘hide’ it means we have to hide that particular table header and column and change that checkbox value to ‘show’ to show the hidden table header and column on next time.

output

table output 1
how to show and hide Table Column Using JavaScript
how to show and hide Table Column Using JavaScript
how to show and hide Table Column Using JavaScript

You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Also Read Add, Edit And Delete Rows From Table Dynamically Using CSS and JavaScript

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *