0

Estoy intentando crear un boton de mostrar/ocultar una tabla. La tabla al principio se imprime asi: introducir la descripción de la imagen aquí

Pero, luego de darle click al boton de mostrar/ocultar tabla. La tabla se muestra asi introducir la descripción de la imagen aquí

Este es la funcion que uso para mostrar o ocultar la tabla en javascript:

function mostrarOcultar(id) {
    var elemento = document.getElementById(id);
    if (!elemento) {
        return true;
    }
    if (elemento.style.display == "none") {
        elemento.style.display = "block";
        // Mostrar el tbody al mostrar la tabla
        var tbody = elemento.querySelector("tbody");
        if (tbody) {
            tbody.style.display = "table-row-group";
        }
    } else {
        elemento.style.display = "none";
        // Ocultar el tbody al ocultar la tabla
        var tbody = elemento.querySelector("tbody");
        if (tbody) {
            tbody.style.display = "none";
        }
    }
    return true;
}

Esto es el html donde genero el boton y llamo a la funcion 
 <div class="bg-dark text-light text-center border-top wow fadeIn" id="resultadoEncriptarContainer2" style="display: none;">
            <button onclick="return mostrarOcultar('toggleTableBtn')" class="btn btn-primary">Mostrar/ocultar tabla</button>
            <p id="resultadoEncriptar" style="display: none;"></p>
            <div>
                <table class="table table-striped table-bordered mt-5" id="toggleTableBtn" >
                    <thead>
                        <tr>
                            <th>Caracter</th>
                            <th>Valor</th>
                            <th>Operacion</th>
                            <th>Valor</th>
                            <th>Caracter</th>
                        </tr>
                    </thead>
                    <tbody id="tablaEncriptacionBody">
                    </tbody>
                </table>
            </div>
        </div>

0

1 respuesta 1

1

En lugar de todo eso, al ser bootstrap, puedes hacerlo así, usando la clase d-none y la propiedad classList del elemento:

function mostrarOcultar(id) {
  var elemento = document.getElementById(id);
  if (!elemento) {
    return true;
  }
  elemento.classList.toggle("d-none");
  return true;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css">

<div class="bg-dark text-light text-center border-top wow fadeIn" id="resultadoEncriptarContainer2">
  <button onclick="return mostrarOcultar('toggleTableBtn')" class="btn btn-primary">Mostrar/ocultar tabla</button>
  <p id="resultadoEncriptar" style="display: none;"></p>
  <div>
    <table class="table table-striped table-bordered mt-5" id="toggleTableBtn">
      <thead>
        <tr>
          <th>Caracter</th>
          <th>Valor</th>
          <th>Operacion</th>
          <th>Valor</th>
          <th>Caracter</th>
        </tr>
      </thead>
      <tbody id="tablaEncriptacionBody">
      </tbody>
    </table>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.