0

Tengo una consulta de la cual saco un array con PHP y MYSQL, cada fila debe tener un botón, estas filas las muestro en una tabla HTML, lo que deseo hacer es habilitar botón por botón, o sea, que el usuario no acceda a todos los botones, quiero que vaya en orden, uno por uno.

Gracias de antemano.

if (isset($_GET["ver_temas"])) 
{
    $curso_id = $_GET['ver_temas'];
    //echo $curso_id;
    global $conexion, $curso, $temas, $archivo, $video;
    $sql = "SELECT * FROM `temas`
            WHERE curso_id='$curso_id'";
    $resultado = mysqli_query($conexion, $sql);
}

<?php while($row = mysqli_fetch_array($resultado)) { $temaid = $row["id"];?>


            <table class="table">

                <td width="3%" style="background-color: white; border-color: #AAAAAA" ><strong><h5><?php echo($n); ?></h5></strong></td>
                <td width="40%" style="background-color: white; border-color: #AAAAAA"><strong><h4><?php echo $row["tema"]; ?> </h4></strong></td>
                <td class="" width="20%" style="background-color: white; border-color: #AAAAAA"><center>

Y este es el botón que se genera por cada fila.

<a type="button" class="btn btn-success tema-btn example_A" href="tema.php?tema_view=<?php echo $row['id']?>"> Ver tema... </a></center>
                </td>


            </table>


    <?php } ?>
14
  • Hola, agrega el código que tienes hasta el momento para que podamos ayudarte. Commented el 18 sept. 2019 a las 13:07
  • Y que determina o cual es la condición para que el botón este habilitado o no este habilitado ? .... y estas diciendo en tu pregunta -- lo que deseo hacer es habilitar botón por botón o sea, que el usuario no acceda a todos los botones ??? no entiendo supongo que lo que quieres hacer es inhabilitar los botones Commented el 18 sept. 2019 a las 13:25
  • El propósito es que el usuario no se "salte" los temas, que vaya en orden Commented el 18 sept. 2019 a las 13:28
  • La tabla la creas con un ciclo, no? supongo, y agregalo
    – DaxTter77
    Commented el 18 sept. 2019 a las 13:30
  • Efectivamente . Commented el 18 sept. 2019 a las 13:32

2 respuestas 2

0

Una de las ideas que tengo es colocándole id a cada uno de los botones, entonces, lo que se haría es que apenas se oprima el botón, eso llame un método que le tome el id y lo de por hecho, por ende habilita el siguiente, algo más o menos así.

HTML

<a type="button" id="<?php echo $n ?> onclick="guardarId(this)" class="btn btn-success tema-btn example_A disabled" href="tema.php?tema_view=<?php echo $row['id']?>"> Ver tema... </a></center>

JS

function guardarId(btn){
   localStorage.setItem("id", btn.id);
}

function habilitarBtn(){
   if(localStorage.getItem("id") != null){
      var id = localStorage.getItem("id");
      var btn = document.getElementById(parseInt(id) + 1);
      var otrobtn = document.getElementById(id+1);
      otrobtn.classList.remove("disabled");
      button.classList.add("disabled");
   }else{
      var btn = document.getElementById("1");
      btn.classList.remove("disabled");
   }
}

habilitarBtn();

Algo más o menos de esta forma, alguna cosa, duda o sugerencia, me comentas. Espero que te sirva, saludos!!

3
  • Muchas gracias, lo revisaré. Saludos! Commented el 18 sept. 2019 a las 14:13
  • @EnriqueE.Molina me acabo de dar cuenta de una cosa e hice unos cambios, ya que tú al darle al botón lo rediriges a otra pagina, entonces lo que estaba haciendo anteriormente no serviría, se perdería, en esta ocasión se guarda la variable y no se pierde aunque navegues
    – DaxTter77
    Commented el 18 sept. 2019 a las 14:20
  • Vale, gracias por ese dato! Commented el 18 sept. 2019 a las 14:32
0

Te dejo un ejemplo funcional con JS , del comportamiento que quieres que tenga tu tabla, Lo que hice fue asignar un id al botón cuando la lleno y en el botón que creo agrega un método que valida cual es el siguiente id que llega y lo habilito, lo hago con una funcion que remueve el disabled del botón y tengo una validación para que el primer boton se cree sin el disabled.

Espero te sirva , Prueba el snippet

 
 $('document').ready(() => {
       var ArrayTable = {1: 'a' , 2: 'b', 3: 'c'};
      
       $.each(ArrayTable, function (index, value) {
       console.log(index + ' ' + value)
         if(index == 1){
          $("table tbody").append("<tr><td>"+ index +"</td> "+ 
         "<td><input type='submit' value='ir al curso' id='Column"+index+"' onclick='habilitarBtn("+index+")'></td></tr>");
         } else {
            $("table tbody").append("<tr><td>"+ index +"</td> "+ 
         "<td><input type='submit' value='ir al curso' id='Column"+index+"' disabled onclick='habilitarBtn("+index+")'></td></tr>");
         }
      });
 });
 
 
 function habilitarBtn(index) {
  const Siguiente = index + 1;

  $('#Column'+Siguiente+'').removeAttr("disabled");
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th>Columna<th>
      <th>ir al curso<th>
    </tr>
  </thead>
  <tbody id"myTable">
  </tbody>
</table>
<br>

1
  • Gracias! Lo revisaré :D Commented el 18 sept. 2019 a las 16:16

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.