Blog

How to Hide and Show a Row in An HTML Table

Discover easy ways to hide and show rows in HTML tables. Learn CSS, JavaScript, and jQuery techniques for dynamic and user-friendly web tables.

Josh Hartman
Josh Hartman
Last updated: Dec 01, 2023
Table of Contents

HTML tables are a key part of building websites because they help organize and show data neatly. But sometimes, you might want to make certain rows appear or disappear as things change. In this article, we'll look at simple ways to do this, making your website more user-friendly.

The Basics of HTML Tables

Before we talk about hiding and showing rows, let's take a quick look at how an HTML table is built. An HTML table is like a grid made up of rows (marked as <tr>), columns (marked as <td> for regular cells and <th> for header cells), and cells. Each row holds information about something specific, like a category or an item, and it's a crucial part of organizing and presenting information on a website. So, a basic table structure looks like this:

HTML
<table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> <tr> <td>Data 3</td> <td>Data 4</td> </tr> </table>
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4

In this example, <th> is used for headers, and <td> is used for regular data cells. The table is a way of organizing information neatly into rows and columns.

Showing Rows Dynamically with JavaScript

To make the hiding and showing of rows dynamic, JavaScript comes to the rescue. Using JavaScript, you can manipulate the DOM (Document Object Model) to alter the visibility of rows based on user actions or certain conditions.

HTML
<button onclick="toggleRowVisibility()">Toggle Row Visibility</button> <table> <tr> <td>Visible Row 1</td> </tr> <tr id="hidden-row"> <td>Toggleable Row 2</td> </tr> <tr> <td>Visible Row 3</td> </tr> </table>
JavaScript
<script> function toggleRowVisibility() { var hiddenRow = document.getElementById("hidden-row"); if (hiddenRow.style.display === "none") { hiddenRow.style.display = ""; } else { hiddenRow.style.display = "none"; } } </script>

In this example, the JavaScript function toggleRowVisibility toggles the display property of the row with the id hidden-row between "none" and an empty string.

Showing Rows Dynamically with jQuery

If you're using jQuery, a popular JavaScript library, achieving the same result becomes even more concise. Here's an example:

JavaScript
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script> $(document).ready(function() { $("#toggle-button").click(function() { $("#hidden-row").toggle(); }); }); </script>

Here, the jQuery toggle method simplifies the process of showing and hiding the row with the id hidden-row when the button is clicked.

Getting good at hiding and showing rows in an HTML table can make your website more interesting and easy to use. It lets you create web pages that change and respond to what users do. You can use different tools like CSS, plain JavaScript, or jQuery to make your data look just the way you want it. Try out these methods to make your website more interactive and user-friendly.

Josh Hartman

Josh Hartman

Josh is the founder of HTML Tables and eklipse Development, a Webflow Professional Partner. With a knack for seamless web experiences, Josh takes pride in merging code with creative design. Beyond the digital realm, he is an avid outdoors enthusiast and fitness aficionado, often finding inspiration in nature. Josh earned his bachelor of science degree from Drexel University.

Copy