Change rowspan by ID using jQuery

Question

Change rowspan by ID using jQuery

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

0

Good morning, I'm making a website for the integrated project after finishing the higher degree of systems. The website is for a "gym". I was good until I had a schedule that I want to do and that is dynamic, that takes the data (of activities) from the database and that depending on the data that they are, put the name of the activity in the row of the correct time and day.

The problem comes when I want the cell to occupy the cells corresponding to the duration of the activity, for example, a 45 minute activity that occupies 3 cells.

The table of the database that I use to obtain the information is the following:

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

And the code that I have been using is the following, although I have made many changes already, this is the last attempt:

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

EXAMPLE OF THE HTML OUTPUT THAT GENERATES THE PREVIOUS CODE, HAVING CONNECTION TO MY DATABASE.

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

javascript jquery html php

asked by adri_mlg 31.05.2017 в 10:48

source

3 answers

0

you can do:

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

Greetings.

answered by 31.05.2017 в 12:00

0

TL; DR: Do it from the server side, it'll be easier for you.

Long explanation:

You will have several problems if you use those IDs in the cells, since when building the selector you have to escape the two points. Either way, the selector does not have it well built.

In your example:

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

Correct form:

$("#contenidoHorariosTablaTabla td#" + id)

And escaping the two points of the hour:

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

With this you could select the element, but when you are executing the function expandCell () before closing the TD tag, jQuery can not find the element and does not add the rowspan attribute.

The best solution, in case you want to do it from a client (although I think it would be optimal to do it from the server, as you have already commented) would be to analyze the table after rendering with jQuery, establishing a data attribute, for example:

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

With this you could execute a function that modifies the attributes of the cells according to the duration:

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

But it will generate a problem because it will move the cells that you had built for the following hours, so you would have to eliminate them or hide them, leaving the script in this way (to give an example):

$(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');
      }
    }
  });
});

answered by 31.05.2017 в 13:25

How to create a custom bookmark with two icons in gmap v3 Problem when exporting to excel on the server

score 2 · Accepted Answer

The problem you suffer is because you are using a jQuery query that does not correctly search for the id attribute of each element:

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

Attributes must be defined in brackets, not separated by a colon.

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>

The problem will be when the cells in the following rows want to show up. They will do it in the next column, so you should omit them from PHP or generate additional code to delete it from jQuery.

In order for your PHP to be able to call the cleanup after having generated the DOM, you must change:

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

This way we postpone the calls to the appropriate functions at the end of the document, and not in between.

Anyway, I would fix the problem from PHP and not from the client side.