I have a table with cells where there is a "more information" button, the language of the code text is in Galician, and there are rows that are hidden by default.
I have the problem when I do a click event in jquery to show the hidden row, it is not shown, at the moment I only have a click event for the first button and when I make this work, it is when I will make the rest work with a loop as How did I hide them?
Code
<!DOCTYPE html>
<html lang="es">
<head>
<title>Recetas</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Lista de recetas</h1>
<?php include('recetas.php'); ?>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(document).ready(function(){
var contador = 0;
while (true) {
var nombre = "fila" + contador;
if ($('#'+nombre).length) {
$('#'+nombre).hide();
}else {
break;
}
contador++;
}
$('#btn-0').click(function(){
$('#btn-0').show();
});
});
</script>
</body>
</html>
The table is generated in php, if you need this code let me know by leaving a comment and I'll modify the question to include it.
--- MODIFICATION ---
Table generated by php:
<?php
include('ConectarBD.php');
$conec = new ConectarBD("localhost", "root", "", "receitas");
$bd = $conec->abrirConexion();
$sql1 = "SELECT receita.nome, chef.nomeartistico FROM receita, chef WHERE receita.cod_chef = chef.codigo";
$result1 = $bd->query($sql1);
$contador = 0;
echo "<table>";
echo "<tr>";
echo "<th>RECEITA</th>";
echo "<th>CHEF</th>";
echo "<th></th>";
echo "</tr>";
while($fila=$result1->fetch_assoc()){
echo "<tr>";
echo "<td>".$fila['nome']."</td>";
echo "<td>".$fila['nomeartistico']."</td>";
echo '<td><button id="btn-'.$contador.'">Máis información</button></td>';
echo "</tr>";
echo '<tr id="fila'.$contador.'">';
echo "<td>";
echo "<table>";
echo "<tr>";
echo "<th>FICHA DE RECEITA</th>";
echo "<th></th>";
echo "<th></th>";
echo "</tr>";
//Donde ARROZ AO COMIÑO sustituir por variable
$nomReceta = $fila["nome"];
$sql2 = "SELECT receita.nome, chef.nomeartistico, grupo.nome, receita.dificultade, receita.tempo, receita.elaboración FROM receita, chef, grupo WHERE receita.cod_chef = chef.codigo AND receita.cod_grupo = grupo.codigo AND receita.nome = '$nomReceta'";
$sql3 = "SELECT ingrediente.nome FROM ingrediente, receita_ingrediente, receita WHERE receita.codigo = receita_ingrediente.cod_receita AND receita_ingrediente.cod_ingrediente = ingrediente.codigo AND receita.nome = '$nomReceta'";
$result2 = $bd->query($sql2);
$result3 = $bd->query($sql3);
while ($fil1=$result2->fetch_assoc()) {
echo "<tr>";
echo "<td>".$fila["nome"]."</td>";
echo "<td></td>";
echo "<td>CHEF: ".$fil1["nomeartistico"]."</td>";
echo "</tr>";
echo "<tr>";
echo "<td>GRUPO: ".$fil1["nome"]."</td>";
echo "<td>DIFICULTADE: ".$fil1["dificultade"]."</td>";
echo "<td>TEMPO: ".$fil1["tempo"]."</td>";
echo "</tr>";
echo "<tr>";
echo "<td>ELABORACIÓN:</td>";
echo "<td></td>";
echo "<td></td>";
echo "</tr>";
echo "<tr>";
echo "<td>".$fil1["elaboración"]."</td>";
echo "<td></td>";
echo "<td></td>";
echo "</tr>";
}
echo "</table>";
echo "</td>";
echo "</tr>";
$contador++;
}
echo "</table>";
echo "<br /><br />";
$conec->cerrarConexion($bd);
?>
This is a simple example of how to do it based on your schematic.
A common class is added to the buttons that will be the identifier used to know where it is done
click
. Once the button is pressed, the id is determined, which has been changed to numeric to simplify, and based on that id the hidden row to be shown is determined, in your case you were applying theshow()
to the button itself instead of to the corresponding row.