Ocultar filas de tabla en JavaScript

Para ocultar y volver a mostrar filas seleccionadas de una tabla al hacer clic, asígnales una clase común y selecciónalas con jQuery. Usa toggle() si quieres que un solo control alterne entre ambos estados, o hide() y show() si prefieres controles separados. Los ejemplos requieren cargar jQuery una sola vez. JavaScript en el navegador también puede cambiar la visibilidad mediante el DOM y CSS; jQuery ofrece métodos prácticos para seleccionar y actualizar elementos.

Usar la función toggle() de jQuery para ocultar filas de una tabla en JavaScript

Asigna una clase de categoría a cada grupo de filas de detalle e incluye esa categoría en el atributo data-prod-cat del control correspondiente. Así, cada control queda vinculado únicamente a sus propias filas. Las filas empiezan ocultas con style="display:none", lo que permite mostrarlas con los métodos de visualización de jQuery; evita combinar esta configuración con una regla CSS independiente que las mantenga ocultas. El controlador del clic impide que un enlace navegue a #.

Carga el script de jQuery antes del código que usa $, como en el ejemplo. La función de inicialización espera a que el marcado del documento esté disponible antes de asociar los controladores, pero no puede compensar una carga de jQuery ausente o fallida. Para añadir más categorías, usa de forma coherente los nombres de clase y los valores de los atributos: el valor 3 selecciona .cat3, por lo que no afecta a filas con otras clases. Si el control es un botón, conserva type="button" para evitar que envíe el formulario que lo contiene.

Ejecuta este ejemplo:

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

Esta pequeña ilustración en JavaScript muestra la lógica para asociar cada categoría con sus filas. En el navegador, jQuery aplica la misma idea a las filas de la tabla:

<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>

El selector se construye a partir de la categoría del enlace en el que se hizo clic, por lo que al pulsar el control «Toggle oranges» solo se ven afectadas las filas .cat1. La etiqueta visible «Toggle oranges» permanece en inglés; también permanecen en inglés las etiquetas «Hide rows» y «Show rows» de los controles separados del segundo ejemplo. Al volver a pulsar el control, esas filas se ocultan. La clase de cada fila de detalle debe coincidir exactamente con el valor de la categoría; si una fila tiene otra clase, el selector no la encontrará. Si el control no navega a ningún sitio, puedes usar <button type="button"> en lugar de un enlace; en ese caso no hace falta preventDefault(). Como estas filas empiezan con display:none, el primer clic las muestra y el siguiente las oculta. Si deben estar visibles al inicio, elimina ese estilo inicial y el primer clic las ocultará.

Usar las funciones show() y hide() de jQuery para ocultar filas de una tabla en JavaScript

Usa controles separados cuando quieras que cada acción sea explícita, en lugar de alternar el estado con cada clic. Mantén la misma clase en las filas a las que se dirigen ambos controles y haz que empiecen con display:none para que la primera acción de mostrar pueda revelarlas. Si deben estar visibles inicialmente, omite ese estilo; el control para ocultarlas será entonces el primer cambio. Si la tabla tiene varios grupos, los controles pueden apuntar a una clase específica de la categoría en vez de .detail-row.

<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() establece en none la propiedad display de las filas seleccionadas; show() restaura un estado de visualización adecuado para que las filas sigan el diseño de la tabla. No uses display: block como solución general para mostrar una fila, porque no conserva su disposición normal como fila de tabla. Como estas filas empiezan ocultas, el control para mostrarlas las revela y se puede pulsar de nuevo sin problema; el control para ocultarlas las oculta explícitamente. En cambio, toggle() invierte el estado actual en cada clic, por lo que resulta útil cuando un solo control debe alternar entre ambos estados. Usa los controles separados de show() y hide() cuando las personas necesiten acciones directas, por ejemplo, una forma de volver a mostrar un grupo después de ocultarlo.