It lets users be more flexible by letting them hide or show columns they don’t want to see on a list.
You can easily do this using jQuery. Just toggle the specific columns based on what you choose.
In the example, I’m making a table layout to list employee details. Checkboxes are used to hide or show table columns with the help of jQuery.
Table of Content
- Create a Table
- Create a Database connection file
- HTML and PHP – List data in Table layout
- jQuery – Hide and Show Table column
- Demo
- Conclusion
1. Create a Table
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 );
2. Create a Database connection file
Create config.php file for the database connection.
<?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 – List data in table layout
I use PHP to get data from a database and create rows in a <table >. For each table column (S.no, Name, Salary, Gender, City, Email), I add a checkbox. You can check or uncheck these checkboxes to toggle the visibility of the corresponding columns using jQuery.
I’ve also added a data-col attribute to each checkbox to help detect the table column index for hiding. The attribute value corresponds to the position of the table column.
<?php
include("config.php");
?>
<div class="container">
<div>
<strong>Checked the Checkbox for Hide column</strong>
<input type="checkbox" class="hidecol" value="name" data-col="2" /> Name
<input type="checkbox" class="hidecol" value="salary" data-col="3" /> Salary
<input type="checkbox" class="hidecol" value="gender" data-col="4" /> Gender
<input type="checkbox" class="hidecol" value="city" data-col="5" /> City
<input type="checkbox" class="hidecol" value="email" data-col="6" /> 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 – Hide and Show Table column
When a checkbox is clicked, the script reads the value of the data-col attribute and assigns it to the colno variable.
Then, it checks whether the checkbox is checked or not. If checked, it hides the corresponding table column using the nth-child() method and hide() method. If not checked, it shows the column.
$(document).ready(function(){
// Checkbox click
$(".hidecol").click(function(){
const colno = $(this).data('col');
let 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 make tables show or hide columns when you check or uncheck a checkbox, I used something called nth-child(). It helps pick out specific columns easily, so we can make them appear or disappear whenever we want by using methods like hide() or show().
If you found this tutorial helpful then don't forget to share.