How to Hide and Show a Row in An HTML Table

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.

Tip: If you find writing all of the markup for a table cumbersome, feel free to check out our best-in-class HTML Table Generator to save yourself some time.

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>

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.