0

<table id="pan" class="w3-table-all w3-card-4">↩
<tr><th colspan='4' class='categoria'>pan y cereales</th></tr><tr> 
<th>Producto</th><th>U. de medida</th><th>Precio</th><th>Marca</th><tr 
class='w3-hover-blue'><td><div class='contenedor_prod' 
onclick='mostrar_ref(this);'><span class='referencia'>$0</span>Arroz blanco 
simple</div></td><td> 1 Kg. </td><input  type='hidden' value='1112301' 
name='codpro[]'><td><input type='number' step='0.01' min='0.01' max='99999' 
class='w3-input' name='precio[]'></td><td><input class='w3-input' type='text' 
name='marca[]'></td></tr><tr class='w3-hover-blue'><td><div 
class='contenedor_prod' onclick='mostrar_ref(this);'><span 
class='referencia'>$120</span>Facturas</div></td><td> Docena </td><input  
type='hidden' value='1111301' name='codpro[]'><td><input type='number' 
step='0.01' min='0.01' max='99999' class='w3-input' name='precio[]'></td><td> 
<input class='w3-input' type='text' name='marca[]'></td></tr></table>↩

Tengo un tabla que se crea dinamicamente y en una de sus columnas muestra el nombre de productos, cuestion que busco que al hacer click en dicho producto, aparezca un pequeño popup "encima" mostrando un precio de referencia y mi problema es no saber como referenciar la classname del elemento(popup)al hacer click sobre el primer elemento(productos).Edito y agrego que dicho popup solo se muestre unos 5 segundos.

aca esta el codigo de la funcion que crea el html, esta funcion se ejecuta dentro de

<table>function mostrar(1)</table)

funcion php, en la clase "contenedor_prod" es donde se deberia hacer click para que apareciera el pequeño popup de la clase "referencia"

{
include("conexion.php");
if($consulta = mysqli_prepare($conexion,"SELECT productos.cod_producto, productos.descripcion, productos.unidad,productos.precio_ref, rubros.descripcion FROM productos, rubros WHERE productos.rubro =? AND productos.rubro = rubros.ID_rubro ORDER BY productos.descripcion"))
{
  mysqli_stmt_bind_param($consulta,'i',$numrubro);
  mysqli_stmt_execute($consulta);
  $resultado = mysqli_stmt_get_result($consulta);

}
else
{
  printf("Error: %s.\n", mysqli_stmt_error($consulta));
  die(mysqli_error($consulta)); 
}


$i=0;
$j=0;
while($fila = mysqli_fetch_array($resultado))
{
 if($j==0)
 { 

   echo "<tr><th colspan='4' class='categoria'>$fila[4]</th></tr>";
  echo "<tr>";
  echo "<th>Producto</th>";
  echo "<th>U. de medida</th>";
  echo "<th>Precio</th>";
  echo "<th>Marca</th>";

  $j=1;
 }

  echo "<tr class='w3-hover-blue'>";
  echo "<td><div class='contenedor_prod' onclick='mostrar_ref(valorquenoconozco);' ><span class='referencia' >$$fila[3]</span>$fila[1]</div></td>";
  echo "<td> $fila[2] </td>";
  echo "<input  type='hidden' value='$fila[0]' name='codpro[]'>";
  echo "<td><input type='number' step='0.01' min='0.01' max='99999' class='w3-input' name='precio[]'></td>";
  echo "<td><input class='w3-input' type='text' name='marca[]'></td>";
  echo "</tr>";


}

}
?>

aqui el css del popup

.referencia{
padding: 10px 17px;
text-align: center;
border-radius: 12px;
background-color: rgb(66, 66, 66);
color:white;
position: absolute;
z-index: 1;
right:auto;
display: none;
}

y aqui el pequeño script de JS

function mostrar_ref(clase){
document.getElementsByClassName(clase).style.display= "inline-block";
}

NOTA: si falta complementar la pregunta, me lo hacen saber, gracias

edito y agrego el html de una de las tablas que se generan dinamicamente. Aclaro que borre parte de la tabla porque es muy extensa, pero ese seria la estructura, con datos tomados de una base de datos, copie tal cual como me salia el codigo fuente de la paginas.

<table id="pan" class="w3-table-all w3-card-4">↩
    <tr><th colspan='4' class='categoria'>pan y cereales</th></tr><tr> 
    <th>Producto</th><th>U. de medida</th><th>Precio</th><th>Marca</th><tr 
    class='w3-hover-blue'><td><div class='contenedor_prod' 
    onclick='mostrar_ref(this);'><span class='referencia'>$0</span>Arroz blanco 
    simple</div></td><td> 1 Kg. </td><input  type='hidden' value='1112301' 
    name='codpro[]'><td><input type='number' step='0.01' min='0.01' max='99999' 
    class='w3-input' name='precio[]'></td><td><input class='w3-input' type='text' 
    name='marca[]'></td></tr><tr class='w3-hover-blue'><td><div 
    class='contenedor_prod' onclick='mostrar_ref(this);'><span 
    class='referencia'>$120</span>Facturas</div></td><td> Docena </td><input  
    type='hidden' value='1111301' name='codpro[]'><td><input type='number' 
    step='0.01' min='0.01' max='99999' class='w3-input' name='precio[]'></td><td> 
    <input class='w3-input' type='text' name='marca[]'></td></tr><tr class='w3- 
    hover-blue'><td><div class='contenedor_prod' onclick='mostrar_ref(this);'> 
    <span class='referencia'>$0</span>Fideos secos tipo guisero</div></td><td> 
    500g. </td><input  type='hidden' value='1113101' name='codpro[]'><td><input 
    type='number' step='0.01' min='0.01' max='99999' class='w3-input' 
    name='precio[]'></td><td><input class='w3-input' type='text' name='marca[]'> 
    </td></tr></table>↩

1 respuesta 1

1

Solo necesitas enviar el elemento en el que se hizo clic y buscar dentro el que deseas mostrar usando mostrar_ref(this);, donde this es el que hace la "magia":

function mostrar_ref(item) {
  // .referencia está dentro del div (item)
  // Busca en item el elemento que contiene la clase
  let ref = item.querySelector('.referencia');
  // El click solo funcionará cuando referencia está oculto,
  // es decir, si no tiene la clase "mostrar"
  if(!ref.classList.contains('mostrar')) {
    // Agregar la clase para mostrar
    ref.classList.add('mostrar');
    // Crear una espera de 5 segundos (5000 milisegundos) para ocultar
    setTimeout(function() {
      // Quitar la clase
      ref.classList.remove('mostrar');
    }, 5000);
  }
}
.referencia{
  padding: 10px 17px;
  text-align: center;
  border-radius: 12px;
  background-color: rgb(66, 66, 66);
  color:white;
  position: absolute;
  z-index: 1;
  right:auto;
  display: none;
}
.referencia.mostrar {
  display:block;
}
<table id="pan" class="w3-table-all w3-card-4">
    <tr>
        <th colspan='4' class='categoria'>pan y cereales</th>
    </tr>
    <tr> 
        <th>Producto</th>
	<th>U. de medida</th>
	<th>Precio</th>
	<th>Marca</th>
    </tr><!-- Faltaba este, supongo que se te olvidó copiar -->
    <tr class='w3-hover-blue'>
        <td><div class='contenedor_prod' onclick='mostrar_ref(this);'><span class='referencia'>$0</span>Arroz blanco simple</div></td>
	<td> 1 Kg. </td>
	<input  type='hidden' value='1112301' name='codpro[]'><!-- Este debe estar dentro de un td -->
	<td><input type='number' step='0.01' min='0.01' max='99999' class='w3-input' name='precio[]'></td>
	<td><input class='w3-input' type='text' name='marca[]'></td>
    </tr>
    <tr class='w3-hover-blue'>
        <td><div  class='contenedor_prod' onclick='mostrar_ref(this);'><span class='referencia'>$120</span>Facturas</div></td>
	<td> Docena </td>
	<input type='hidden' value='1111301' name='codpro[]'><td>
	<input type='number' step='0.01' min='0.01' max='99999' class='w3-input' name='precio[]'></td>
	<td><input class='w3-input' type='text' name='marca[]'></td>
    </tr>
    <tr class='w3-hover-blue'>
        <td><div class='contenedor_prod' onclick='mostrar_ref(this);'><span class='referencia'>$0</span>Fideos secos tipo guisero</div></td>
	<td> 500g. </td>
	<input type='hidden' value='1113101' name='codpro[]'>
	<td><input type='number' step='0.01' min='0.01' max='99999' class='w3-input' name='precio[]'></td>
	<td><input class='w3-input' type='text' name='marca[]'></td>
    </tr>
</table>

Por cierto, al tener posición absoluta no hay diferencia entre usar block o inline-block.

15
  • muchas gracias, voy a estudiar y desmenuzar mas el codigo JS para entenderlo mejor, ahora bien, si no es mucha molestia, para que el mismo popup se muestre solo 5seg y regrese al estado inicial oculto?.. al poner el arroba no me permite mencionar al usuario. @Triby
    – Ultimatux
    Commented el 27 may. 2020 a las 22:13
  • Si la respuesta te sirvió, por favor márcala como aceptada. Ahora la edito para ocultar automáticamente.
    – Triby
    Commented el 27 may. 2020 a las 22:23
  • Por alguna razon en mi codigo no funciona como en el ejemplo y lo unico que hice fue cambiar el "this", cambiar mi js y agregar ese fragmento de css. @Triby
    – Ultimatux
    Commented el 29 may. 2020 a las 14:20
  • ¿Qué es lo que no funciona, no aparece la referencia o no se oculta automáticamente? Revisa la consola, ¿hay algún error?
    – Triby
    Commented el 29 may. 2020 a las 17:40
  • Ese es el problema, que tal cual como esta en tu ejemplo lo aplique a mi codigo, la unica diferencia es que en tu ejemplo es estatico, el mio lo genera de forma dinamica pero el resto es igual.Nose si pasar todo mi codigo completo? y en el caso de hacerlo deberia mostrarlo como "respuesta de mi pregunta? @Triby
    – Ultimatux
    Commented el 29 may. 2020 a las 22:12

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.