1

Tengo una tabla con celdas donde hay un botón "más información", el idioma del texto del código esta en gallego, y hay filas que por defecto están ocultas.
El problema lo tengo cuando hago un evento click en jquery para mostrar la fila oculta esta no se muestra, por el momento solo tengo un evento click para el primer botón y cuando haga funcionar este es cuando pondré a funcionar el resto con un bucle tal y como hice para ocultarlos.
Código

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

La tabla es generada en php, si necesitáis este código avisarme dejando un comentario y modificare la pregunta para incluirlo.

--- MODIFICACIÓN ---

Tabla generada por 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);
?>

4
  • Añade el ejemplo de la fila con el botón tal y como esté en tu código para tener un ejemplo completo.
    – Carmen
    Commented el 14 abr. 2020 a las 18:02
  • ¿Cuál es el propósito de un loop infinito?
    – VRoxa
    Commented el 14 abr. 2020 a las 19:03
  • @VRoxa los id tanto de la fila como del boton estan formados por una cadena mas un numero que se autoincrementa, la cadena siempre es la misma, fila para las filas y btn- para los botones. Con el bucle recorro todos los id y con el break salgo del bucle cuando ya no halla id con ese nombre
    – JPillado
    Commented el 14 abr. 2020 a las 19:29
  • @Carmen no entendí muy bien con lo de ejemplo, de todas formas modifico la pregunta para incluir el php que genera la tabla
    – JPillado
    Commented el 14 abr. 2020 a las 20:17

1 respuesta 1

1

Este es un ejemplo sencillo de como hacerlo basado en tu esquema.

Se añade una clase común a los botones que va a ser el identificador usado para saber dónde se hace click. Una vez pulsado el botón se determina el id, que se ha cambiado a numérico para simplificar, y en función de ese id se determina la fila oculta a mostrar, en tu caso estabas aplicando el show() al propio botón en lugar de a la fila correspondiente.

$('.btn-mi').click(function(){
    var id = $(this).attr('id');
    console.log(id);
    $("#fila"+id).show();
});
.none { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <th>RECEITA</th>
    <th>CHEF</th>
    <th></th>
  </tr>
  <tr>
    <td>Nombre0</td>
    <td>NombreArt0</td>
    <td><button id="0" class="btn-mi">Máis información</button></td>
  </tr>
  <tr id="fila0" class="none">
    <td>Fila oculta</td>
    <td>Aquí va la tabla con detalles</td>
    <td>Fila oculta</td>
  </tr>
  <tr>
    <td>Nombre1</td>
    <td>NombreArt1</td>
    <td><button id="1" class="btn-mi">Máis información</button></td>
  </tr>
  <tr id="fila1" class="none">
    <td>Fila oculta</td>
    <td>Aquí va la tabla con detalles</td>
    <td>Fila oculta</td>
  </tr>
</table>

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.