How to Hide Table Rows in JavaScript

To hide and reveal selected table rows after a click, group the rows with a shared class and select that class with jQuery. Use toggle() when one control should switch the rows between states, or use hide() and show() when you want separate controls. The examples below require jQuery to be loaded once. Browser JavaScript can also change visibility through the DOM and CSS; jQuery provides convenient methods for selecting and updating elements.

Use jQuery’s toggle() Function to Hide Table Rows in JavaScript

Give each set of detail rows a category class, and put that category in the corresponding control’s data-prod-cat attribute. This keeps each trigger connected to only its own rows. The rows start hidden with style="display:none", which lets jQuery’s display methods reveal them; avoid combining this setup with a separate CSS rule that forces the rows to remain hidden. The click handler prevents an anchor from navigating to #.

Load the jQuery script before the code that uses $, as in the example. The ready callback waits until the document markup is available before attaching handlers, but it cannot compensate for a missing or failed jQuery load. For more categories, use matching class names and data values consistently: a value of 3 selects .cat3, so unrelated row classes will not be affected. If your control is a button, keep type="button" so it does not submit a surrounding form.

Run this example:

const rows = [
  { category: 1, visible: false },
  { category: 1, visible: false },
  { category: 2, visible: false }
];

function toggleCategory(category) {
  for (const row of rows) {
    if (row.category === category) row.visible = !row.visible;
  }
}

toggleCategory(1);
console.log(rows.map(row => row.visible ? "shown" : "hidden").join(", "));

shown, shown, hidden

This small JavaScript illustration shows the category-matching logic. In the browser, jQuery applies the same idea to table rows:

<table>
  <tbody>
    <tr>
      <th scope="row">Oranges</th><td>100</td>
      <td><a href="#" class="toggler" data-prod-cat="1">Toggle oranges</a></td>
    </tr>
    <tr class="cat1" style="display:none"><td></td><td>120</td><td></td></tr>
    <tr class="cat1" style="display:none"><td></td><td>140</td><td></td></tr>
    <tr>
      <th scope="row">Apples</th><td>100</td>
      <td><a href="#" class="toggler" data-prod-cat="2">Toggle apples</a></td>
    </tr>
    <tr class="cat2" style="display:none"><td></td><td>120</td><td></td></tr>
    <tr class="cat2" style="display:none"><td></td><td>140</td><td></td></tr>
  </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $(".toggler").on("click", function (event) {
    event.preventDefault();
    const category = $(this).attr("data-prod-cat");
    $(".cat" + category).toggle();
  });
});
</script>

The selector is built from the clicked link’s category, so clicking the oranges control affects .cat1 only. Clicking it again hides those rows. The class on every detail row must match the category value exactly; if a row has a different class, the selector will not find it. Use a <button type="button"> instead of an anchor if the control does not navigate anywhere; then preventDefault() is unnecessary. Because these rows start with display:none, the first click reveals them and the next click hides them. If they should start visible, remove that initial style and the first click will hide them instead.

Use jQuery’s show() and hide() Functions to Hide Table Rows in JavaScript

Use separate controls when the action should be explicit rather than switching on every click. Keep the same class on the rows both controls target, and start them with display:none so the first show action can reveal them. If rows should be visible initially, omit that style; the hide control then provides the first change. The controls can target a category-specific class instead of .detail-row when a table contains multiple groups.

<table>
  <tbody>
    <tr><th scope="row">Oranges</th><td>100</td></tr>
    <tr class="detail-row" style="display:none"><td>Extra quantity</td><td>120</td></tr>
    <tr class="detail-row" style="display:none"><td>Reserve quantity</td><td>140</td></tr>
  </tbody>
</table>
<button id="hide-rows" type="button">Hide rows</button>
<button id="show-rows" type="button">Show rows</button>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $("#hide-rows").on("click", function () {
    $(".detail-row").hide();
  });
  $("#show-rows").on("click", function () {
    $(".detail-row").show();
  });
});
</script>

hide() sets the selected rows’ display to none; show() restores an appropriate display state so table rows participate in table layout. Do not set a row to display: block as a general way to reveal it, because that does not preserve its normal table-row layout. Since these rows begin hidden, the show control reveals them and remains safe to click again; the hide control explicitly hides them. In contrast, toggle() reverses the current state on every click, so it is useful when a single control should alternate. Use the separate show() and hide() controls when users need direct commands, such as an always-available way to reveal a group after it has been hidden.