0

Buenas a todos, estoy haciendo una web para el proyecto integrado tras terminar el grado superior de sistemas. La web es para un "gimnasio". La llevaba bien hasta que he llegado a un horario que quiero hacer y que sea dinámico, que coja los datos (de actividades) de la base de datos y que dependiendo de los datos que sean pues ponga el nombre de la actividad en la fila de la hora y el día correctos.

El problema llega cuando quiero que la celda me ocupe las celdas correspondientes a la duración de la actividad, por ejemplo, una actividad de 45 minutos que ocupe 3 celdas.

La tabla de la base de datos que uso para obtener la información es la siguiente:

+--------+------------+--------+----------+------+-----------+------------+
| ID_Act | HoraInicio | Dia    | Duracion | Sala | DNI_Prof  | Dificultad |
+--------+------------+--------+----------+------+-----------+------------+
|      1 | 09:00:00   | LUNES  | 45       | 1    | 12345678A | 2          |
|      1 | 09:00:00   | MARTES | 45       | 1    | 12345678A | 3          |
|      1 | 10:30:00   | LUNES  | 45       | 1    | 12345678A | 1          |
+--------+------------+--------+----------+------+-----------+------------+

Y el código que he estado usando es el siguiente, aunque he hecho muchos cambios ya, este es el último intento:

<?php session_start(); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

  function expandirCelda(numceldas,id)
  {
    $("#contenidoHorariosTablaTabla td:id('" + id + "')").attr('rowspan',"'" + numceldas + "'");
  }

</script>

<?php

  include("connbd.php");

  $hora = array("09:00","09:15","09:30","09:45","10:00","10:15","10:30","10:45","11:00","11:15","11:30",
  "11:45","12:00","12:15","12:30","12:45","13:00","13:15","13:30","13:45","14:00","14:15","14:30","14:45",
  "15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45","17:00","17:15","17:30","17:45","18:00",
  "18:15","18:30","18:45","19:00","19:15","19:30","19:45","20:00","20:15","20:30","20:45","21:00");

?>

<div id=contenidoHorarios class="contenidoHorarios">
  <div id=contenidoHorariosTabla class="contenidoHorariosTabla">
    <div id=contenidoHorariosTablaHoras class="contenidoHorariosTablaHoras">

      <table border="1px" id="contenidoHorariosTablaTabla" class="contenidoHorariosTablaTabla">

                  <tr>
                    <th width="5%"></th>
                    <th width="13.57%">Lunes</th>
                    <th width="13.57%">Martes</th>
                    <th width="13.57%">Miércoles</th>
                    <th width="13.57%">Jueves</th>
                    <th width="13.57%">Viernes</th>
                    <th width="13.57%">Sábado</th>
                    <th width="13.57%">Domingo</th>
                  </tr>

<?php
  foreach ($hora as $horatupla) {
 ?>
    <tr id="<?php $idfila=$horatupla; echo $idfila; ?>">
      <th><?php echo $horatupla; $id="LUNES".$horatupla; ?></th>
      <td id="<?php echo $id ?>">
        <?php

        $consulta="SELECT actividades.nombre AS Actividad, ID_Act, HoraInicio, Dia, Duracion, Sala, Dificultad FROM horarios
                   JOIN actividades WHERE actividades.id LIKE ID_Act AND Dia='LUNES' AND HoraInicio='".$horatupla.":00';";

        $resultado=mysqli_query($conn,$consulta);

        while ($row=$resultado->fetch_assoc()){

          $horainicio = substr($row['HoraInicio'],0,-3);
          $dia = $row['Dia'];
          $duracion = $row['Duracion'];
          $dificultad = $row['Dificultad'];
          $actividad = $row['Actividad'];

          if ($actividad=="15"){
            echo $actividad;
          }

          if ($duracion=='30'){
            echo "<script>expandirCelda('2','".$id."','".$duracion."')</script>";
            echo $actividad;
          }

          if ($duracion=='45'){
            echo "<script>expandirCelda('2','".$id."','".$duracion."')</script>";
            echo $actividad;
          }

        ?>
      <?php } ?>
      </td>
    </tr>
    <?php } ?>
        </table>
      </div>
    </div>
  </div>

EJEMPLO DE LA SALIDA HTML QUE GENERA EL CÓDIGO ANTERIOR, TENIENDO CONEXIÓN A MI BASE DE DATOS.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

  function expandirCelda(numceldas,id,idfila,actividad)
  {
    $("#contenidoHorariosTablaTabla td:id('" + id + "')").attr('rowspan',"'" + numceldas + "'");
  }

</script>


<div id=contenidoHorarios class="contenidoHorarios">
  <div id=contenidoHorariosTabla class="contenidoHorariosTabla">
    <div id=contenidoHorariosTablaHoras class="contenidoHorariosTablaHoras">

      <table border="1px" id="contenidoHorariosTablaTabla" class="contenidoHorariosTablaTabla">

                  <tr>
                    <th width="5%"></th>
                    <th width="13.57%">Lunes</th>
                    <th width="13.57%">Martes</th>
                    <th width="13.57%">Miércoles</th>
                    <th width="13.57%">Jueves</th>
                    <th width="13.57%">Viernes</th>
                    <th width="13.57%">Sábado</th>
                    <th width="13.57%">Domingo</th>
                  </tr>

    <tr id="09:00">
      <th>09:00</th>
      <td id="LUNES09:00">
        <script>expandirCelda('3','LUNES09:00','09:00','ZUMBA','45')</script>ZUMBA            </td>
    </tr>
        <tr id="09:15">
      <th>09:15</th>
      <td id="LUNES09:15">
              </td>
    </tr>
        <tr id="09:30">
      <th>09:30</th>
      <td id="LUNES09:30">
              </td>
    </tr>
        <tr id="09:45">
      <th>09:45</th>
      <td id="LUNES09:45">
              </td>
    </tr>
        <tr id="10:00">
      <th>10:00</th>
      <td id="LUNES10:00">
              </td>
    </tr>
        <tr id="10:15">
      <th>10:15</th>
      <td id="LUNES10:15">
              </td>
    </tr>
        <tr id="10:30">
      <th>10:30</th>
      <td id="LUNES10:30">
        <script>expandirCelda('3','LUNES10:30','10:30','ZUMBA','45')</script>ZUMBA            </td>
    </tr>
        <tr id="10:45">
      <th>10:45</th>
      <td id="LUNES10:45">
              </td>
    </tr>
        <tr id="11:00">
      <th>11:00</th>
      <td id="LUNES11:00">
              </td>
    </tr>
        <tr id="11:15">
      <th>11:15</th>
      <td id="LUNES11:15">
              </td>
    </tr>
        <tr id="11:30">
      <th>11:30</th>
      <td id="LUNES11:30">
              </td>
    </tr>
        <tr id="11:45">
      <th>11:45</th>
      <td id="LUNES11:45">
              </td>
    </tr>
        <tr id="12:00">
      <th>12:00</th>
      <td id="LUNES12:00">
              </td>
    </tr>
        <tr id="12:15">
      <th>12:15</th>
      <td id="LUNES12:15">
              </td>
    </tr>
        <tr id="12:30">
      <th>12:30</th>
      <td id="LUNES12:30">
              </td>
    </tr>
        <tr id="12:45">
      <th>12:45</th>
      <td id="LUNES12:45">
              </td>
    </tr>
        <tr id="13:00">
      <th>13:00</th>
      <td id="LUNES13:00">
              </td>
    </tr>
        <tr id="13:15">
      <th>13:15</th>
      <td id="LUNES13:15">
              </td>
    </tr>
        <tr id="13:30">
      <th>13:30</th>
      <td id="LUNES13:30">
              </td>
    </tr>
        <tr id="13:45">
      <th>13:45</th>
      <td id="LUNES13:45">
              </td>
    </tr>
        <tr id="14:00">
      <th>14:00</th>
      <td id="LUNES14:00">
              </td>
    </tr>
        <tr id="14:15">
      <th>14:15</th>
      <td id="LUNES14:15">
              </td>
    </tr>
        <tr id="14:30">
      <th>14:30</th>
      <td id="LUNES14:30">
              </td>
    </tr>
        <tr id="14:45">
      <th>14:45</th>
      <td id="LUNES14:45">
              </td>
    </tr>
        <tr id="15:00">
      <th>15:00</th>
      <td id="LUNES15:00">
              </td>
    </tr>
        <tr id="15:15">
      <th>15:15</th>
      <td id="LUNES15:15">
              </td>
    </tr>
        <tr id="15:30">
      <th>15:30</th>
      <td id="LUNES15:30">
              </td>
    </tr>
        <tr id="15:45">
      <th>15:45</th>
      <td id="LUNES15:45">
              </td>
    </tr>
        <tr id="16:00">
      <th>16:00</th>
      <td id="LUNES16:00">
              </td>
    </tr>
        <tr id="16:15">
      <th>16:15</th>
      <td id="LUNES16:15">
              </td>
    </tr>
        <tr id="16:30">
      <th>16:30</th>
      <td id="LUNES16:30">
              </td>
    </tr>
        <tr id="16:45">
      <th>16:45</th>
      <td id="LUNES16:45">
              </td>
    </tr>
        <tr id="17:00">
      <th>17:00</th>
      <td id="LUNES17:00">
              </td>
    </tr>
        <tr id="17:15">
      <th>17:15</th>
      <td id="LUNES17:15">
              </td>
    </tr>
        <tr id="17:30">
      <th>17:30</th>
      <td id="LUNES17:30">
              </td>
    </tr>
        <tr id="17:45">
      <th>17:45</th>
      <td id="LUNES17:45">
              </td>
    </tr>
        <tr id="18:00">
      <th>18:00</th>
      <td id="LUNES18:00">
              </td>
    </tr>
        <tr id="18:15">
      <th>18:15</th>
      <td id="LUNES18:15">
              </td>
    </tr>
        <tr id="18:30">
      <th>18:30</th>
      <td id="LUNES18:30">
              </td>
    </tr>
        <tr id="18:45">
      <th>18:45</th>
      <td id="LUNES18:45">
              </td>
    </tr>
        <tr id="19:00">
      <th>19:00</th>
      <td id="LUNES19:00">
              </td>
    </tr>
        <tr id="19:15">
      <th>19:15</th>
      <td id="LUNES19:15">
              </td>
    </tr>
        <tr id="19:30">
      <th>19:30</th>
      <td id="LUNES19:30">
              </td>
    </tr>
        <tr id="19:45">
      <th>19:45</th>
      <td id="LUNES19:45">
              </td>
    </tr>
        <tr id="20:00">
      <th>20:00</th>
      <td id="LUNES20:00">
              </td>
    </tr>
        <tr id="20:15">
      <th>20:15</th>
      <td id="LUNES20:15">
              </td>
    </tr>
        <tr id="20:30">
      <th>20:30</th>
      <td id="LUNES20:30">
              </td>
    </tr>
        <tr id="20:45">
      <th>20:45</th>
      <td id="LUNES20:45">
              </td>
    </tr>
        <tr id="21:00">
      <th>21:00</th>
      <td id="LUNES21:00">
              </td>
    </tr>
            </table>
      </div>
    </div>
  </div>
2
  • adri, si quieres que te lo haga en el lado del cliente ponme un ejemplo de HTML generado (y no del código PHP, que no me sirve de nada sin conexión a tu base de datos). Commented el 31 may. 2017 a las 10:16
  • @oscargarcia actualizo el post con lo que me pides ;). Por cierto, las ID no se repiten, lo hice de manera que fuera imposible que se repitiera, ahora lo verás en el html.
    – adri_mlg
    Commented el 31 may. 2017 a las 10:38

3 respuestas 3

2

El problema que sufres es debido a que estás usando una consulta jQuery que no busca correctamente el atributo id de cada elemento:

function expandirCelda(numceldas,id,idfila,actividad)
{
  $("[id='" + id + "']").attr('rowspan', numceldas);
}

Los atributos deben definirse entre corchetes, no separados por dos puntos.

function expandirCelda(numceldas,id,idfila,actividad)
{
  var celda = $("[id='" + id + "']");
  var fila = $("[id='" + idfila + "']");
  var n = fila.index() + 1, c = celda.index();
  var filas = fila.closest('table').find('tr');
  for (var i = 1; i < numceldas; i++) {
    filas.eq(n++).find('*').eq(c).remove();
  }
  celda.attr('rowspan', numceldas);
}

/* Generamos esto al final de la página, en caso contrario no podremos ver
las celdas que estarán definidas en el futuro (DOM incompleto) */
expandirCelda('3','LUNES0900','09:00','ZUMBA','45');
expandirCelda('3','LUNES10:30','10:30','ZUMBA','45');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id=contenidoHorarios class="contenidoHorarios">
  <div id=contenidoHorariosTabla class="contenidoHorariosTabla">
    <div id=contenidoHorariosTablaHoras class="contenidoHorariosTablaHoras">
      <table border="1px" id="contenidoHorariosTablaTabla" class="contenidoHorariosTablaTabla">
        <tr>
          <th width="5%"></th>
          <th width="13.57%">Lunes</th>
          <th width="13.57%">Martes</th>
          <th width="13.57%">Miércoles</th>
          <th width="13.57%">Jueves</th>
          <th width="13.57%">Viernes</th>
          <th width="13.57%">Sábado</th>
          <th width="13.57%">Domingo</th>
        </tr>
        <tr id="09:00">
          <th>09:00</th>
          <td id="LUNES0900">ZUMBA            
          </td>
        </tr>
        <tr id="09:15">
          <th>09:15</th>
          <td id="LUNES09:15">
          </td>
        </tr>
        <tr id="09:30">
          <th>09:30</th>
          <td id="LUNES09:30">
          </td>
        </tr>
        <tr id="09:45">
          <th>09:45</th>
          <td id="LUNES09:45">
          </td>
        </tr>
        <tr id="10:00">
          <th>10:00</th>
          <td id="LUNES10:00">
          </td>
        </tr>
        <tr id="10:15">
          <th>10:15</th>
          <td id="LUNES10:15">
          </td>
        </tr>
        <tr id="10:30">
          <th>10:30</th>
          <td id="LUNES10:30">ZUMBA            
          </td>
        </tr>
        <tr id="10:45">
          <th>10:45</th>
          <td id="LUNES10:45">
          </td>
        </tr>
        <tr id="11:00">
          <th>11:00</th>
          <td id="LUNES11:00">
          </td>
        </tr>
        <tr id="11:15">
          <th>11:15</th>
          <td id="LUNES11:15">
          </td>
        </tr>
        <tr id="11:30">
          <th>11:30</th>
          <td id="LUNES11:30">
          </td>
        </tr>
        <tr id="11:45">
          <th>11:45</th>
          <td id="LUNES11:45">
          </td>
        </tr>
        <tr id="12:00">
          <th>12:00</th>
          <td id="LUNES12:00">
          </td>
        </tr>
        <tr id="12:15">
          <th>12:15</th>
          <td id="LUNES12:15">
          </td>
        </tr>
        <tr id="12:30">
          <th>12:30</th>
          <td id="LUNES12:30">
          </td>
        </tr>
        <tr id="12:45">
          <th>12:45</th>
          <td id="LUNES12:45">
          </td>
        </tr>
        <tr id="13:00">
          <th>13:00</th>
          <td id="LUNES13:00">
          </td>
        </tr>
        <tr id="13:15">
          <th>13:15</th>
          <td id="LUNES13:15">
          </td>
        </tr>
        <tr id="13:30">
          <th>13:30</th>
          <td id="LUNES13:30">
          </td>
        </tr>
        <tr id="13:45">
          <th>13:45</th>
          <td id="LUNES13:45">
          </td>
        </tr>
        <tr id="14:00">
          <th>14:00</th>
          <td id="LUNES14:00">
          </td>
        </tr>
        <tr id="14:15">
          <th>14:15</th>
          <td id="LUNES14:15">
          </td>
        </tr>
        <tr id="14:30">
          <th>14:30</th>
          <td id="LUNES14:30">
          </td>
        </tr>
        <tr id="14:45">
          <th>14:45</th>
          <td id="LUNES14:45">
          </td>
        </tr>
        <tr id="15:00">
          <th>15:00</th>
          <td id="LUNES15:00">
          </td>
        </tr>
        <tr id="15:15">
          <th>15:15</th>
          <td id="LUNES15:15">
          </td>
        </tr>
        <tr id="15:30">
          <th>15:30</th>
          <td id="LUNES15:30">
          </td>
        </tr>
        <tr id="15:45">
          <th>15:45</th>
          <td id="LUNES15:45">
          </td>
        </tr>
        <tr id="16:00">
          <th>16:00</th>
          <td id="LUNES16:00">
          </td>
        </tr>
        <tr id="16:15">
          <th>16:15</th>
          <td id="LUNES16:15">
          </td>
        </tr>
        <tr id="16:30">
          <th>16:30</th>
          <td id="LUNES16:30">
          </td>
        </tr>
        <tr id="16:45">
          <th>16:45</th>
          <td id="LUNES16:45">
          </td>
        </tr>
        <tr id="17:00">
          <th>17:00</th>
          <td id="LUNES17:00">
          </td>
        </tr>
        <tr id="17:15">
          <th>17:15</th>
          <td id="LUNES17:15">
          </td>
        </tr>
        <tr id="17:30">
          <th>17:30</th>
          <td id="LUNES17:30">
          </td>
        </tr>
        <tr id="17:45">
          <th>17:45</th>
          <td id="LUNES17:45">
          </td>
        </tr>
        <tr id="18:00">
          <th>18:00</th>
          <td id="LUNES18:00">
          </td>
        </tr>
        <tr id="18:15">
          <th>18:15</th>
          <td id="LUNES18:15">
          </td>
        </tr>
        <tr id="18:30">
          <th>18:30</th>
          <td id="LUNES18:30">
          </td>
        </tr>
        <tr id="18:45">
          <th>18:45</th>
          <td id="LUNES18:45">
          </td>
        </tr>
        <tr id="19:00">
          <th>19:00</th>
          <td id="LUNES19:00">
          </td>
        </tr>
        <tr id="19:15">
          <th>19:15</th>
          <td id="LUNES19:15">
          </td>
        </tr>
        <tr id="19:30">
          <th>19:30</th>
          <td id="LUNES19:30">
          </td>
        </tr>
        <tr id="19:45">
          <th>19:45</th>
          <td id="LUNES19:45">
          </td>
        </tr>
        <tr id="20:00">
          <th>20:00</th>
          <td id="LUNES20:00">
          </td>
        </tr>
        <tr id="20:15">
          <th>20:15</th>
          <td id="LUNES20:15">
          </td>
        </tr>
        <tr id="20:30">
          <th>20:30</th>
          <td id="LUNES20:30">
          </td>
        </tr>
        <tr id="20:45">
          <th>20:45</th>
          <td id="LUNES20:45">
          </td>
        </tr>
        <tr id="21:00">
          <th>21:00</th>
          <td id="LUNES21:00">
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

El problema lo tendrás cuando las celdas de las siguientes filas quieran mostrarse. Lo harán en la siguiente columna, por lo que deberás omitirlas desde PHP o bien generar código adicional para borrarlo desde jQuery.

Para que tu PHP pueda llamar a la limpieza tras haber generado el DOM debes cambiar:

        $script = '';
        while ($row=$resultado->fetch_assoc()){

          $horainicio = substr($row['HoraInicio'],0,-3);
          $dia = $row['Dia'];
          $duracion = $row['Duracion'];
          $dificultad = $row['Dificultad'];
          $actividad = $row['Actividad'];

          if ($actividad=="15"){
            echo $actividad;
          }

          if ($duracion=='30'){
            $script .= "expandirCelda('2','".$id."','".$duracion."');";
            echo $actividad;
          }

          if ($duracion=='45'){
            $script .= "expandirCelda('2','".$id."','".$duracion."');";
            echo $actividad;
          }

        ?>
      <?php } ?>
      </td>
    </tr>
    <?php } ?>
        </table>
      </div>
    </div>
  </div>
  <script><?= $script ?></script>

De esta manera postponemos las llamadas a las funciones adecuadas al final del documento, y no entre medias.

De todas formas, yo arreglaría el problema desde PHP y no desde el lado del cliente.

2
  • Lo de las celdas de las siguientes filas ya tuve problemas con ellas en los primeros intentos del horario, ¿sabes cómo podría quitarlas sin que me implique perder esas celdas por si justo hay una actividad a esa hora? No sé si me explico ^^'
    – adri_mlg
    Commented el 31 may. 2017 a las 11:33
  • Habría que arreglarlo desde PHP ya que llamas al script en medio de la generación del DOM y no puedes hacer un readahead a filas y celdas que aún no han sido creadas en el DOM. Te dejo un ejemplo. Commented el 31 may. 2017 a las 13:01
0

puedes hacer:

$('#' + id).attr("rowspan", valor);

Un saludo.

1
  • Efectivamente, craso error.
    – Diego
    Commented el 31 may. 2017 a las 10:57
0

TL;DR: Hazlo desde el lado de servidor, te va a resultar más sencillo.


Explicación larga:

Vas a tener varios problemas si utilizas esos IDs en las celdas, ya que a la hora de construir el selector tienes que escapar los dos puntos. De cualquier manera, el selector no lo tienes bien construido.

En tu ejemplo:

$("#contenidoHorariosTablaTabla td:id('" + id + "')")

Forma correcta:

$("#contenidoHorariosTablaTabla td#" + id)

Y escapando los dos puntos de la hora:

$("#contenidoHorariosTablaTabla td#" + id.replace(':','\\: '))

Con esto podrías seleccionar el elemento, pero al estar ejecutando la función expandirCelda() antes de cerrar la etiqueta TD, jQuery no encuentra el elemento y no añade el atributo rowspan.

La mejor solución, en caso de que quieras hacerlo desde cliente (aunque creo que lo óptimo sería hacerlo desde servidor, como ya te han comentado) sería analizar la tabla tras el renderizado con jQuery, estableciendo un atributo data, por ejemplo:

<td id="<?php echo $id ?>" data-duracion="<?=$duracion?>">

Con ello podrías ejecutar una función que modificase los atributos de las celdas en función de la duración:

$(document).ready(function(){
  $('td').each(function(i,e){
    if($(this).data('duracion')){
      $(this).attr('rowspan',($(this).data('duracion')/15));
    }
  });
});

Pero te generará un problema ya que desplazará las celdas que tenías construidas para las horas posteriores, así que tendrías que eliminarlas u ocultarlas, quedando el script de esta manera (por poner un ejemplo):

$(document).ready(function(){
  $('td').each(function(i,e){
    if($(this).data('duracion')){
      $(this).attr('rowspan',($(this).data('duracion')/15));

      // eliminemos las celdas desplazadas
      var celdas_desplazadas = $(this).data('duracion')/15 - 1;

      for(j = i+1; j <= (i+celdas_desplazadas); j++){
        $('td').eq(j).css('display','none');
      }
    }
  });
});
1
  • Muchísimas gracias por tomarte el tiempo en explicarlo todo, lamentablemente no dimos mucho en el curso sobre JS y menos aún de JQuery y estoy bastante verde, de nuevo muchas gracias :D
    – adri_mlg
    Commented el 31 may. 2017 a las 11:42

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.