0

Tengo mi HTML, y yo quiero crear dentro del div con la clase nums, un contador de unas tablas que se crean mediante una base en SQL, la tabla la tengo así:

    <div class="card-body">
        <h5>Tabla de Resultados de Football</h5>
        <p id="tables-count"></p>
        <hr>
        <table class="table table-striped table-sm">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Date</th>
                    <th scope="col">Name Team 1</th>
                </tr>
            </thead>
            <tbody>

                <?php 
                    while($rows = mysqli_fetch_assoc($result_football)){  
                ?>
                <tr class="align-middle table-football">
                    <th scope="row"><?php echo $rows['id']; ?></th>
                    <td><?php echo $rows['date_soccer']; ?></td>
                    <td><?php echo $rows['team_soccer_1']; ?></td>
                    </td>
                </tr>
                <?php } ?>

            </tbody>
        </table>
    </div>

Y justo abajo de esta tabla tengo este div con un id, y quiero mediante js crear un botón que separe las tablas mediante números (ósea 1 2 3 4 5 ...), y bueno, quiero que cada 5 tablas se cree un botón, a continuación es donde quiero que mediante js con algún algoritmo se cree los botones a medida que se crean las tablas, y a la vez pueda seleccionar un botón y que me muestre las tablas que estén en esa sección ósea (sección 1 2 ...), no se si me explico

<div class="table_nums">
    <div class="nums" id="nums-foot">
            
    </div>
</div>

estaba intentando algo en js pero no encuentro la manera de poder hacer lo que quiero lograr, simplemente que cada 5 tablas que se cree, se inserte en un div un botón con una clase un id y un valor de un numero (eso dependería de cuantas tablas hay, ya que quiero que cada 5 tablas se cree un botón, entonces si hay 15 tablas, van a crearse 3 botones 1, 2 y 3) y de esta manera esconder las tablas que se van creando con PHP con js, ya que si selecciono el botón de sección 3 me muestre los últimos 5 creados nomas, y si selecciono el botón de sección 1 me muestre los primeros 5 creados.

No sirvo para explicarme, espero que me sepan entender, hace tiempo que estoy con lo mismo y no encuentro tutoriales ni ninguna pagina que explique bien como hacer :)

1 respuesta 1

0

No tengo claro si lo que quieres conseguir es poner un botón cada 5 tablas o cada 5 filas dentro de la misma tabla.

Porque si fuese el primer caso, en tu código, solamente se crea una tabla y el while está iterando filas de ésta.

Suponiendo que es así, que lo que quieres es pintar un botón cada 5 filas y que este botón sirva para ocultar todas las filas menos las que le corresponen por id, el enfoque que deberías tomar es la funcionalidad Collapse de Bootstrap 5 ya que hace justo lo que necesitas.

También es posible que te pueda servir este código que he encontrado en red: Mostrar Div y Ocultar Otro[Bootstrap]

Y respecto a como mostrar el botón solamente cada 5 filas, eso se consigue con un contador y haciendo que se pinte el botón solamente cuando este contador es divisible por 5:

if($contador % 5 == 0)
  'pinto el botón

Espero que te pueda servir mi contribución.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.