To display a table on a button click using JavaScript, we have to create an HTML table structure in our HTML file and initially set its style attribute to display: none; to hide it. Then, we will use JavaScript. We will have to toggle the display property of the table to show or hide it based on the button click event.
Here are some examples where this functionality is helpful:
Dynamic reports: Suppose you’re building a web application where users can generate sales reports. Users can select criteria such as date range, product categories, or regions and click a “Generate Report” button. The report, which includes a detailed table of sales data, is initially hidden and only appears after the user clicks the button.
Form validation results: In a form where users enter multiple inputs, you can hide a validation summary table that shows errors or warnings until the user submits the form. Once the form is submitted, the table with validation results is displayed if there are any issues that the user needs to address.
Search results: In a web-based inventory management system, users might search for specific items in stock. Initially, the search results table is hidden, and only after the user clicks the “Search” button does the table appear with the matching inventory items.
Here’s the HTML code for creating the button and the table in it:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Show Table on Button Click</title></head><body><button id="showTableBtn">Show Table</button><table id="myTable" style="display: none;"><tr><th>Col A</th><th>Col B</th><th>Col C</th></tr><tr><td>D 1</td><td>D 2</td><td>D 3</td></tr><!-- Add more rows as needed --></table><script src="index.js"></script></body></html>
The explanation of the code give above is as follows:
Lines 4–8: Set up the meta-information, including character encoding, viewport settings for responsiveness, and the page title.
Lines 10–24: Set up the body content and structure of the page. The page will have a button to show the table and the table itself. The table is initially hidden (display: none). It will have three columns with a data entry (D 1 - 3) in each of them.
Line 26: It eferences an external JavaScript file (index.js).
Here is the JavaScript code for displaying the table when clicking the button.
document.getElementById("showTableBtn").addEventListener("click", function() {var table = document.getElementById("myTable");if (table.style.display === "none" || table.style.display === "") {table.style.display = "table"; // Show the table if it's hidden} else {table.style.display = "none"; // Hide the table if it's visible}});
In this example:
The button with the ID showTableBtn triggers the event when clicked.
The JavaScript code listens for the button click event and toggles the display property of the table with the ID myTable between "table" (to show the table) and "none" (to hide the table).
When you click the “Show Table” button, the table will be displayed, and clicking it again will hide it.
Run the code widget given below to try it out yourself:
Using JavaScript to display a table on a button click is a straightforward and effective way to manage content visibility in web applications. By initially hiding the table with CSS and then toggling its visibility through JavaScript, developers can create dynamic and user-friendly interfaces.
Free Resources