Ocultar filas de tabla en JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Ocultar filas de tabla en JavaScript
Anika Tabassum Era 12 octubre 2023
JavaScript JavaScript Table
  1. Utilice la función toggle() de jQuery para ocultar las filas de la tabla en JavaScript
  2. Utilice la función show() y hide() de jQuery para ocultar filas de tabla en JavaScript
Ocultar filas de tabla en JavaScript

En JavaScript, podemos definir ciertos datos de la tabla bajo una clase común que tendrá alguna función con la que cooperar. Esta función específica declarará cómo se comportan las filas de esa tabla en activadores selectivos.

En palabras sencillas, un botón o una etiqueta de enlace activará una función que tendrá detalles sobre cómo ocultar y mostrar las filas de la tabla.

Aquí, en nuestros ejemplos, nos centraremos en la función toggle() de jQuery y también en las funciones show() y hide(). Ambas formas se infieren a la expansión y reducción de filas.

Saltemos a las vallas de código.

Utilice la función toggle() de jQuery para ocultar las filas de la tabla en JavaScript

El ejemplo tomará las filas de la tabla y las establecerá en display: "none". Y cuando se hace clic en una determinada etiqueta anchor, redefinirá la etapa actual para display: "block".

Este proceso va a la inversa, y así obtendremos el resultado esperado. Las siguientes líneas de código demuestran el resto.

Fragmento de código:

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<table>
    <tr>
        <td>Oranges</td>
        <td>100</td>
        <td><a href="#" class="toggler" data-prod-cat="1">+</a></td>
    </tr>
    <tr class="cat1" style="display:none">
        <td></td>
        <td>120</td>
    </tr>
    <tr class="cat1" style="display:none">
        <td></td>
        <td>140</td>
    </tr>
    <tr>
        <td>Apples</td>
        <td>100</td>
        <td><a href="#" class="toggler" data-prod-cat="2">+</a></td>
    </tr>
    <tr class="cat2" style="display:none">
        <td></td>
        <td>120</td>
    </tr>
    <tr class="cat2" style="display:none">
        <td></td>
        <td>140</td>
    </tr>
</table>

$(document).ready(function() {
  $('.toggler').click(function(e) {
    e.preventDefault();
    $('.cat' + $(this).attr('data-prod-cat')).toggle();
  });
});

Producción:

Utilice la función jQuery toggle() para ocultar las filas de la tabla

Utilice la función show() y hide() de jQuery para ocultar filas de tabla en JavaScript

Tendremos dos clickables; uno actuará para presentar las filas de la tabla y el otro reducirá las filas. El ejemplo anterior tenía uno en el que se podía hacer clic para hacer la tarea de mostrar y ocultar filas.

Pero tendremos una forma separada de hacer la misma tarea. Revisemos el bloque de código.

Fragmento de código:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $(".cat1").hide();
  });
  $("#show").click(function(){
    $(".cat1").show();
  });
});
</script>
</head>
<body>
  <table>
    <tr>
        <td>Oranges</td>
        <td>100</td>
    </tr>
    <tr class="cat1" style="display:none">
        <td></td>
        <td>120</td>
    </tr>
    <tr class="cat1" style="display:none">
        <td></td>
        <td>140</td>
    </tr>
    </table>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

Producción:

Utilice la función jQuery show() y hide() para ocultar las filas de la tabla

Autor: Anika Tabassum Era
Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

Artículo relacionado - JavaScript Table