0

tengo una tabla creada y que quedaría de la siguiente forma si todo fuese bien (la imagen está tomada sin ocultar campos ni nada): introducir la descripción de la imagen aquí

Ahora uso este código para ocultar las columnas H1 y H2. Están dispuestas de tal manera que tienen el mismo nombre pero cambiando un número al final (este código lo ejecuto en el $(document).ready):


try{
        var n = 1;
        while(true){
            var nomEti = "hOcultas"+n;
            //alert(nomEti);
            var oculto = document.getElementById(nomEti);
            oculto.style.display = "none";
            n++;
        }
    }catch(err){
        //alert(err.message);
    }

Y quedaría tal que así: introducir la descripción de la imagen aquí

Hasta aquí todo bien, ahora cuando uso el siguiente código para mostrarlas cuando pulsa el botón "Mostrar":


try{
        var n = 1;
        while(true){
            var nomEti = "hOcultas"+n;
            //alert(nomEti);
            var oculto = document.getElementById(nomEti);
            oculto.style.display = "block";
            n++;
        }
    }catch(err){
        //alert(err.message);
    }

El resultado me sale así: introducir la descripción de la imagen aquí

¿A qué se puede deber?

Saludos.

6
  • 3
    podrias poner tu codigo html de la tabla, es decir el codigo de como generas la tabla sin ocultar los campos Commented el 23 abr. 2018 a las 15:28
  • 1
    ¿Estás segur@ que tus celdas H tenían display en block antes de ocultarlas? Te sugiero que antes de ocultarlas, hagas un alert() para saber qué valor de display tienen asignado al cargarlas por primera vez, para que sea a ese valor al que regresen cuando las quieras mostrar. Lo otro: al "Mostrar", agregas una condición que genera rowspan, que al ocultar no habías hecho ¿por qué lo haces al mostrar?
    – quinqui
    Commented el 23 abr. 2018 a las 15:36
  • Como dice quinqui, es probable que display block te este generando el problema, seguramente si lo cambias por oculto.style.display = "inherit";deberia mostrarse como corresponde Commented el 23 abr. 2018 a las 15:39
  • @DiegoAvila El código lo genero con php, y no se porque al poner el fragmento de php donde se genera las etiquetas me quita los elementos html (me refiero al editar el post y añadir el código).
    – Yustico
    Commented el 23 abr. 2018 a las 15:47
  • 1
    un td por defecto tiene el valor table-cell en la propiedad display, al poner display block no se está mostrando como debería
    – user7176
    Commented el 23 abr. 2018 a las 15:47

1 respuesta 1

2

una solucion practica seria usar Jquery, a su vez agregar una place o ids, en este ejemplo uso clase: HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="Mostrar/Ocultar Row1" onclick="mostrarOcultar();">
<table id="myTable" border="1"
<tr id="row1">
  <td class="td_hide">Celda 1</td>
  <td>Celda 2</td>
  <td>Celda 3</td>
</tr>
<tr id="row2">
  <td class="td_hide">Celda 4</td>
  <td>Celda 5</td>
  <td>Celda 6</td>
</tr>
</table>

JAVASCRIPT/JQUERY

function mostrarOcultar(){
$('.td_hide').toggle();

}

EL EVENTO TOGGLE muestra / oculta un elemento en este caso un td(columna) detecta automaticamente si esta oculto lo muestra y sino lo hace a la inversa te dejo el link de prueba: LINK DE PRUEBA

1
  • 1
    Perfecto, me ha funcionado. Muchas gracias.
    – Yustico
    Commented el 23 abr. 2018 a las 15:54

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.