How to Hide and Show the Table column using jQuery

It gives more flexibility to the user by allowing them to hide and show those columns which they don’t want to see on the list.

You can do this with jQuery by toggling the specific columns according to the selection.

In the demonstration, I am creating a table layout for listing the employee details and use check boxes to hide and show the table columns using jQuery.

How to Hide and Show the Table column using jQuery


Contents

  1. Table structure
  2. Configuration
  3. HTML and PHP
  4. jQuery
  5. Demo
  6. Conclusion

 


1. Table structure

I am using employee table to list the records in the <table >.

CREATE TABLE `employee` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `emp_name` varchar(100) NOT NULL,
  'salary' varchar(20) NOT NULL,
  'gender' varchar(10) NOT NULL,
  'city' varchar(80) NOT NULL,
  'email' varchar(100) NOT NULL,
  `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

 

2. Configuration

Create a new config.php file for the database connection.

Completed Code

<?php

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);

// Check connection
if (!$con) {
 die("Connection failed: " . mysqli_connect_error());
}

 

3. HTML and PHP

I am using PHP only to fetch records from the database table and using that data to create new rows in the <table>.

With <table > also creating 6 check boxes for each table columns – S.no, Name, Salary, Gender, City, and Email. According to check uncheck state on the checkbox toggle the columns using jQuery.

I have created check boxes id like – col_1, col_2, col_3, etc. according to the position of the table columns.

Completed Code

<?php
    include("config.php");
?>

<div class="container">
    <div>
        <strong>Checked the Checkbox for Hide column</strong>
        <input type="checkbox" class="hidecol" value="name" id="col_2" />&nbsp;Name&nbsp;
        <input type="checkbox" class="hidecol" value="salary" id="col_3" />&nbsp;Salary
        <input type="checkbox" class="hidecol" value="gender" id="col_4" />&nbsp;Gender
        <input type="checkbox" class="hidecol" value="city" id="col_5" />&nbsp;City
        <input type="checkbox" class="hidecol" value="email" id="col_6" />&nbsp;Email
    </div>
    <table width="100%" id="emp_table" border="0">
        <tr class="tr_header">
            <th>S.no</th>
            <th>Name</th>
            <th>Salary</th>
            <th>Gender</th>
            <th>City</th>
            <th>Email</th>
        </tr>
        <?php

        // selecting rows
        $sql = "SELECT * FROM employee ORDER BY ID ASC";
        $result = mysqli_query($con,$sql);
        $sno = 1;

        while($fetch = mysqli_fetch_array($result)){
            $name = $fetch['emp_name'];
            $salary = $fetch['salary'];
            $gender = $fetch['gender'];
            $city = $fetch['city'];
            $email = $fetch['email'];
            ?>
            <tr>
                <td align='center'><?php echo $sno; ?></td>
                <td align='center'><?php echo $name; ?></td>
                <td align='center'><?php echo $salary; ?></td>
                <td align='center'><?php echo $gender; ?></td>
                <td align='center'><?php echo $city; ?></td>
                <td align='center'><?php echo $email; ?></td>
            </tr>
            <?php
            $sno ++;
        }
        ?>
    </table>

</div>

 

4. jQuery

When checkbox element gets clicked then split the element id and get the column number.

Check that element is checked or not if checked then select the table column using nth-child() method where to pass the column number and call the hide() method.

Perform its opposite if the element is not checked.

Completed Code

$(document).ready(function(){

    // Checkbox click
    $(".hidecol").click(function(){

        var id = this.id;
        var splitid = id.split("_");
        var colno = splitid[1];
        var checked = true;
         
        // Checking Checkbox state
        if($(this).is(":checked")){
            checked = true;
        }else{
            checked = false;
        }
        setTimeout(function(){
            if(checked){
                $('#emp_table td:nth-child('+colno+')').hide();
                $('#emp_table th:nth-child('+colno+')').hide();
            } else{
                $('#emp_table td:nth-child('+colno+')').show();
                $('#emp_table th:nth-child('+colno+')').show();
            }

        }, 1500);

    });
});

 

5. Demo


 

6. Conclusion

To show and hide the table column on check box check uncheck I used nth-child() function for selecting the column and calling a required method e.g. hide() or show().

Related Post

Spread the love

3 Comments

  1. Abbas said:

    Thanks Y sir Its very helpful me. Great job sir.

    March 6, 2017
    Reply
  2. Wahyu said:

    Sorry i mean how to hide and show table rows using jquery, not table column, hide show table rows one line.. sorry bad english

    August 30, 2017
    Reply
    • Yogesh Singh said:

      You can easily do this by adding id to each row and call the show() and hide() according to your condition.

      $('#tr_1').show();
      or
      $('#tr_1').hide();

      August 30, 2017
      Reply

Leave a Reply

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