Mostrar/ocultar filas $row con checkbox según variable

alebulo · #1 (**permalink**) 10/11/2017, 07:55

Buenas, tengo una tabla que trae datos de una bd, y las muestra. Muestra articulos con nombre , detalle, etc y uno de los campos (genero) puede ser "Multiple" o Deportes, Puzle, etc . Necesito opcultar todas las filas que contengan en la variable $row['genero'] el valor multiple ($row['genero'] == 'Multiple')

El tema es que no se cómo implementarla en la funcion.

Muestro un ejemplo con una función que oculta la fila según el número en la que se encuentra seteada en el onclick:

Código:

        <script type="text/javascript">
            function ocultarFila(numFila) {                
                var form = document.form;
                fila = document.getElementById('tabla').getElementsByTagName('tr')[numFila];
                if(form.ck.checked == true) {      
                    fila.style.display = 'none';
                } else {                   
                    fila.style.display = '';
                }          
            }
        </script>
    </head>
    <body>
    <?php while($row = $resultado->fetch_array(MYSQLI_ASSOC)) { ;  
?>
        <form name="form">
            Ocultar Fila 1: <input type="checkbox" id="ck" onclick="ocultarFila(1)"/>
        </form>
 <table id="tabla" border="1">
            <tr>
                <td><?php echo $row['ID']; ?></td>
                
            </tr>
            <tr>
                <td><?php echo $row['nombre']; ?></td>
               
            </tr>
            <tr>
                <td><?php echo $row['detalle']; ?></td>
                
            </tr>
			<tr>
                <td><?php echo $row['genero']; ?></td>
               
            </tr>
        </table>   
    </body>

este código interactua con la tabla mía, como está seteado el 1 , oculta el primer resultado de la tabla... calculo que el problema es poner bien la funcion...probe el script de esta forma, poniendo como condicion que tenga el valor Multiple el $row=genero, pero nada...:

Código:

 <script type="text/javascript">
            function ocultarFila() {                
                var form = document.form;
                fila = document.getElementById('tabla').getElementsByTagName('tr')[];
                if((form.ck.checked == true) && ($row['genero'] == 'Multiple')) {      
                    fila.style.display = 'none';
                } else {                   
                    fila.style.display = '';
                }          
            }
        </script>

no hace nada...el if con las dos funciones no se si es la correcta o si no esta bien expresado algo....

espero me ayuden, gracias!

Alexis88 · #2 (**permalink**) 10/11/2017, 08:21

Eso nunca va a funcionar porque estás intentando leer directamente una variable de PHP en JavaScript. Recuerda que PHP trabaja del lado del servidor mientras que JavaScript lo hace del lado del cliente.

Sería más fácil si asignaras ese valor a un <input type="hidden">, es decir, un campo oculto, para que así lo puedas seleccionar mediante JavaScript, leer su valor y evaluar la condición.

alebulo · #3 (**permalink**) 10/11/2017, 08:57

Claro, tenés toda la razon, pero al llamar y armar la tabla:

Código:

<td width="150" height="100"><center><?php echo $row['genero']; ?></td>

muestra los valores y queda asi el código de la tabla en la pantalla:

Código:

<td width="150" height="100"><center>Multiple</td>

Hay alguna forma de decirle que , si tiene ese valor "Multiple", la tabla, en algun <td> lo oculte al clickar en el checkbox?, gracias!

#4 (**permalink**) 10/11/2017, 09:04

Lo que dice alexis y es la mejor opcion, y es que hagas esto:

Código PHP:

Ver original<?php $r = $row['genero']; if($r == "Multiple"){ echo '<input type="hidden" value="'.$r.'" />'; }else{ echo $r; }   ?></td>

Alexis88 · #5 (**permalink**) 10/11/2017, 09:11

Siguiendo mi anterior comentario, solo tendrías que asignar ese valor a un campo oculto para que sea más fácil obtenerlo.

Según veo en tu publicación, tienes algo similar a esto:

Código PHP:

Ver original<tr>
    <td><?php echo $row['genero']; ?></td>
</tr>

Pero si lo hicieras así:

Código PHP:

Ver original<tr>
    <td>
        <input type="hidden" class="genero" value="<?php echo $row['genero']; ?>" />
    </td>
</tr>

Podrías obtenerlo así:

Código Javascript:

Ver originalvar tabla = document.querySelector(idTabla),
    genero = tabla.querySelector(".genero").value,
    fila = document.querySelector(".genero").parentNode.parentNode;
 
if (genero == "multiple"){
    fila.style.display = "none";
}
else{
    fila.style.display = "";
}

El valor de idTabla corresponde al id que hayas asignado a la tabla que contiene al campo a ocultar, siendo que dicho valor tendrás que pasarlo a la función a través de la llamada a la misma en el checkbox de la forma onclick="ocultarFila('#id_tabla')".

De cualquier forma, estoy notando algunos errores en tu código, como ese punto y coma luego de la llave de apertura del while, además de que, al ser un bucle, se generará más de un elemento con el mismo id, como en el caso de la tabla o del checkbox. Recuerda que el id debe ser un valor único en todo el documento.

alebulo · #6 (**permalink**) 10/11/2017, 11:15

Antes que nada, muchisimas gracias por la ayuda, les agradezco en el alma...
Les comento, con las modificaciones que me brindaste Alexis quedo asi:

Código PHP:

 
<table id="mi-tabla" id="tablesorter" class="table table-striped table table-bordered table-condensed">

<thead>

 
<tr>

<th width="35"><center>#</center></th>

<th width="50"><center>ID</center></th>

<th width="80"><center>Código</center></th>

<th width="190"><center>Nombre</center></th>

<th width="150"><center>Género</center></th>

<th width="111"><center>Imágenes</center></th>

<th width="290"><center>Detalle</center></th>

<th width="157"><center>Comentario</center></th>

<!--<th><center>Stock</center></th>-->

 
<th><center>Editar</center></th>

 
</tr>

</thead>

<tbody>

        <script type="text/javascript">

        function ocultarFila(idTabla) { 

                 var tabla = document.querySelector(idTabla),

                      genero = tabla.querySelector(".genero").value,

                       fila = document.querySelector(".genero").parentNode.parentNode;

     

          if (genero == "Multiple"){

          fila.style.display = "none";

    }

    else{

          fila.style.display = "";

    }

         </script>

 

 
<form name="form">

 <input type="checkbox" id="ck" onclick="ocultarFila(idTabla)"/> Ocultar Multiple: 

</form>

<?php while($row = $resultado->fetch_array(MYSQLI_ASSOC)) { 

$color = array(  

        '1' => '<td width="1%" bgcolor="#00FF00">',  

        '0' => '<td width="1%" bgcolor="#d90000">'

    );  

$contador++;?>

       

<tr>

<td width="35" height="100"><center><?php  echo $contador ; ?></td>

<td width="50" height="100"><center><?php echo $row['id']; ?></td>

<td width="80" height="100"><center><?php echo $row['codigo']; ?></td>

<td width="190" height="100"><?php echo $row['nombre']; ?></td>

<td width="150" height="100" type="hidden" class="genero" value= "<?php echo $row['genero']; ?>"></td>

con lo que no se lee ningun campo del tipo genero (queda en blanco por el hidden y no funciona el chekbox...sera que falta definir el id:ck del mismo en la funcion? cómo seria en ese caso?gracias!!

P/d: El error que viste en el ; del while era porque queria mostrar menos cosas que no vienen al caso en la pregunta y lo borre medio a lo bruto, de toda la basura que tiene mi codigo, de pruebas y errores... como verás tiene cosas ocultas y demases yerbas...

Alexis88 · #7 (**permalink**) 10/11/2017, 13:06

No copiaste bien la línea de la llamada a la función.

Es así:

Código HTML:

Ver originalonclick="ocultarFila('#idTabla')"

No así:

Código HTML:

Ver originalonclick="ocultarFila(idTabla)"

Además, el valor idTabla solo es un referente; lo que debe ir es el id real de la tabla a afectar. Sin embargo, en este último código que muestras noto una diferencia importante con el primero: el formulario aparece antes de que se inicie el bucle y, además, no generas una nueva tabla dentro del bucle sino solo una fila nueva para la tabla principal que inicia mucho más arriba.

Si no hay coherencia entre lo que muestras ahora y lo que inicialmente estaba, difícilmente podremos seguir ayudándote.