The Demo
The Code
Output
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("#demochecked").on("change", function(){ $("#chkshowhide").toggle(this.checked); }); }); </script> <style> .divcls { padding:20px; background-color:#000080; color:#fff; font-size:15px; } /*CSS for the table*/ .demotbl { border-collapse: collapse; border: 1px dashed #859FB1; } .demotbl th{ border: 2px solid #96ADBC; color: #3E5260; padding:10px; } .demotbl td{ border: 1px dotted #232F36; color: #002F5E; padding:15px; width:100px; } </style> </head> <body> <div class="divcls"><input type="checkbox" name="mycheckbox" checked id="demochecked"/>Show/Hide HTML Table</div> <br /> <table class="demotbl" id="chkshowhide"> <tr> <th>Product ID</th> <th>Product Name</th> <th>Product Quality</th> <th>Product Quantity</th> </tr> <tr> <td>prod-1</td> <td>Wheat</td> <td>Good</td> <td>333 Bags</td> </tr> <tr> <td>prod-2</td> <td>Rice</td> <td>Good</td> <td>111 Bags</td> <tr> <td>prod-3</td> <td>Sugar</td> <td>Good</td> <td>1200 Bags</td> </tr> </table> </body> </html>
Show/Hide HTML Table
Product ID
Product Name
Product Quality
Product Quantity
prod-1
Wheat
Good
333 Bags
prod-2
Rice
Good
111 Bags
prod-3
Sugar
Good
1200 Bags