1

Espero me puedan ayudar en lo siguiente tengo una tabla llamada(tabla_factura) la cual tiene un botón que hace q se muestre otras 5 tablas, mi consulta es como podría hacer que se oculte la tabla_factura al dar click en el boton para mostrar las 5 tablas. Solo que desaparezca la tabla_factura en versión móvil. La propiedad que investigue es el (display: none) Alguna referencia esta en la parte final del link:https://cybmeta.com/display-none-vs-visibility-hidden-y-tu-como-escondes-las-cosas

var valor=0;
$('#tabla_factura').on('click','.enviar',function(){
    valor = 1;
    var data = tbl_factura.row($(this).parents('tr')).data();//Detecta la fila
    if(tbl_factura.row(this).child.isShown()){//Cuando esta en tamaño responsivo
        var data = tbl_factura.row(this).data();
    }
    Buscar_Cliente(data.ID_CLIENTE);
    Listar_DTProducto(data.ID_DOCUMENTO);
    Buscar_DTProducto(data.ID_DOCUMENTO);
    Listar_CTSAdicional(data.ID_DOCUMENTO);
    Listar_GNCPerdidas(data.ID_DOCUMENTO);
    Buscar_GNCPerdidas(data.ID_DOCUMENTO);
    Buscar_DTVentas(data.ID_DOCUMENTO);
    Listar_TYCondiciones(data.ID_DOCUMENTO);
    Buscar_CTSAdicional(data.ID_DOCUMENTO);
    Listar_CTSUnitario(data.ID_DOCUMENTO);
    document.getElementById('txt_id_compra').value=data.ID_DOCUMENTO;

    if(valor==1){
    }
})
<div class="col-sm-3 table-responsive">
            <table  id="tabla_factura" class="compact row-border" style="width:100%">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Vendedor</th>
                        <th>Documento</th>
                        <th>Acción</th>
                    </tr>
                </thead>
            </table>

2 respuestas 2

1

Actualización de la respuesta

El OP ha proporcionado un nuevo dato en los comentarios que era lo que provocaba que mi anterior respuesta no fuera del todo correcta, y era que está usando el plugin datatables en javascript para generar el contenido de esa tabla.

Eso produce que, en tiempo de ejecución, la tabla quede incluída entre varios div distintos, que contienen la cabecera de la tabla, el pie, etc...

A fuerza de ir probando, la solución ha sido agregar, dentro de la función de este evento:

$('#tabla_factura').on('click','.enviar',function(){

esta instrucción:

$('#tabla_factura').parent().parent().parent().addClass('d-none d-sm-block')

la cual agrega las clases explicadas en la anterior respuesta (mirar más abajo) pero no en la tabla directamente, sino en el tercer <div> padre de la misma, generado dinámicamente por datatables, el cual engloba todo lo agregado por datatables para esa tabla.

Anterior respuesta

Por lo que veo estás usando bootstrap, el cual ya tiene unas clases preparadas para estos casos, tan solo debes aplicarlas a tu gusto en el elemento <table> que quieras esconder en el dispositivo movil. No te hace falta capturar ningún evento de clic de botón, las clases ya estan preparadas para actuar de por si.

En tu caso, creo que las que te toca poner son estas dos:

.d-none .d-sm-block

quedando tu código de esta forma:

<table  id="tabla_factura" class="d-none d-sm-block compact row-border" style="width:100%">

Encontrarás toda la lista de las posibles combinaciones en su documentación.

Para conocer las medidas de las distintas referencias que vas a ver allí mírate también esta tabla de su documentación.

11
  • Con el evento q me dices, en efecto se oculta cuando se vuelve movil, pero al ocultar la tabla factura no puedo seleccionar el boton q me muestra las 5 tablas. Lo que quiero sino es molestia seria q al momento de dar click en el boton me muestre las 5 tablas y la tabla_factura se oculte
    – luiss
    Commented el 19 mar. 2022 a las 18:16
  • El boton esta en js , espero me puedas ayudar, por q con los eventos q me dices se oculta pero me deja un vacío en lo q es web y movil codeshare.io/bvjL4q
    – luiss
    Commented el 21 mar. 2022 a las 4:22
  • Revise el codigo y no hay nada extraño que detecte, probe el $('#tabla_factura').hide(); y el class="d-none d-sm-block compact row-border" pero me oculta la tabla pero me deja un espacio con su cabezal de la tabla, espero me puedas ayudar tengo una imagen de referencia de como esta en web y movil: ibb.co/1XjJFT9
    – luiss
    Commented el 21 mar. 2022 a las 13:32
  • Con el (class="d-none d-sm-block compact row-border") me esconde la tabla cuando se vuelve movil pero, no puedo dar a click en mi boton de mostrar las 5 tablas y queda el espacio que ocupa la tabla_factura, espero tu ayuda.
    – luiss
    Commented el 21 mar. 2022 a las 13:53
  • No se si será mucha molestia masterguru, pero tengo los siguientes problemas 1.La tabla_factura al dar en el boton me arroja un error 2. Producto de ese error se me oculta una columna Costos Generales de una tabla llamada Costos Adicionales. 3.Al momento de ver en movil me queda todavía el buscar y el registro de filas de la tabla. 4. Tengo un icono en el header de una tabla, como podría volverlo a mostrar mediante ese icono. Imagen: ibb.co/42Cpdtd y codigo:jsfiddle.net/luiss1/rLugzcbn/2
    – luiss
    Commented el 21 mar. 2022 a las 15:18
1

Para ocultar la tabla te recomiendo usar esto:

Con esto ocultariamos la tabla.

$('#idtabla').hide();

Con esto mostrariamos la tabla

$('#idtabla').show();

Espero que te sirva de ayuda, un saludo.

1
  • Si lo oculta, pero me deja un enorme vacío con el cabezal de la tabla, como podría solucionarlo?
    – luiss
    Commented el 19 mar. 2022 a las 18:32

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.