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>