<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>↩