-1

Tengo el siguiente código:

var ultima_celda=$("table tr:last");
$("table tr:last").append(ultima_celda);

Lo que hace es duplicar exactamente la última fila, no obstante, necesito poder modificar algunos datos. Aquí les dejo un ejemplo de una fila con todas sus celdas, incluido el botón para eliminarla.

<tr class="fila">
  <td class="tfsize">
    <a href="" class="update fila sinEspacio editable editable-click" data-name="name" data-type="text" data-pk="1" data-sid="1" data-cid="1" data-d="lunes" data-h="500" data-title="Ingresar valor">05:00</a>
  </td>
  <td class="tfsize">
    <a href="" class="update fila sinEspacio editable editable-click" data-name="name" data-type="text" data-pk="1" data-sid="1" data-cid="2" data-d="lunes" data-h="500" data-title="Ingresar valor">645</a>
  </td>
  <td class="tfsize">
    <a href="" class="update fila sinEspacio editable editable-click" data-name="name" data-type="text" data-pk="1" data-sid="1" data-cid="3" data-d="lunes" data-h="500" data-title="Ingresar valor">302</a>
  </td>
  <td class="tfsize">
    <a href="" class="update fila sinEspacio editable editable-click" data-name="name" data-type="text" data-pk="1" data-sid="1" data-cid="4" data-d="lunes" data-h="500" data-title="Ingresar valor">27</a>
  </td>
  <td class="tfsize">
    <a href="" class="update fila sinEspacio editable editable-click" data-name="name" data-type="text" data-pk="1" data-sid="1" data-cid="7" data-d="lunes" data-h="500" data-title="Ingresar valor">400</a> </td>
  <td class="tfsize">
    <!-- $fila->columna_id -->
    <span data-toggle="modal" data-target="#confirmDeletion">
      <button id="delete-button-4" class="deleteFila btn btn-xs btn-danger sinEspacio text-white" data-toggle="modal" data-sid="1" data-d="lunes" data-h="500" data-target="#exampleModal" data-placement="bottom" title="Eliminar" onclick=""><i class="material-icons md-10">delete</i></button>
    </span>
  </td>
</tr>

Necesito poder modificar el valor de la primera celda, es decir, el 05:00 por +30 min o 60 min. Además necesito poder modificar el data-h="500" por data-h="550" o data-h="600" (correspondiente a 05:30 0 06:00 pero esto es algo interno mío). El resto de los "data-x" deben quedar exactamente con el mismo valor.

El procedimiento sería algo así:

Si existe alguna fila en el tbody, entonces:
    var ultima_celda=$("table tr:last");
    ultima_celda.firstcell.value = ultima_celda.firstcell.value + 60 min;
    por cada celda de ultima_celda hacer:
    celda.data-h = celda.data-h + 100;
    $("table tr:last").append(ultima_celda);
Else
   crearprimerafila();

¿Me pueden orientar, por favor?

11
  • Debes empezar arreglando tu código para duplicar filas, pues no es correcto aún. Sólo duplica las columnas, no las filas. Además lo estas agregando dentro de la fila actual, no en una nueva, y además solo lo agrega debajo de la fila que ya conoce como la última, no sobre las nuevas porque son dinámicas y no estás gestionandolo bien. Cuando hayas superado eso y corregido la pregunta miramos el resto, pues ya partimos de una mala base.
    – masterguru
    Commented el 24 may. 2022 a las 7:11
  • Sinceramente no tengo idea de frontend, la "mala base" que comentas es el resultado de otra pregunta hecha en stackoverflow. es.stackoverflow.com/questions/534700/… ¿podrías ayudarme?
    – Carlos
    Commented el 24 may. 2022 a las 7:33
  • Esa respuesta ni es completa ni es correcta por lo que he dicho antes. Son demasiadas cosas a realizar a la vez y este tipo de preguntas no benefician a nadie más. Haz tus preguntas limitandolas a un solo problema a la vez, porque sino parece que estemos trabajando para ti dándote una solución que nadie más va a buscar. Empieza con la pregunta de como duplicar la última fila, y cuando tengas una respuesta certera que hayas comprobado entonces pon otra de como modificar sus datos.
    – masterguru
    Commented el 24 may. 2022 a las 7:39
  • Ya he empezado por esa.. te he pasado el link en el comentario anterior.
    – Carlos
    Commented el 24 may. 2022 a las 7:40
  • Ya, pero en los comentarios dices esto: En otras palabras, necesito que antes de hacer "append" podes editar la hora (sumandole +1 h) y sino existe ninguna fila que la cree porque sino hay nada no clona nada. lo cual nos remite a esta pregunta. Además, dices que quieres crear una fila si no existe ninguna, pero no dices que estructura debe tener. Centrate en un problema cada vez y una vez tengas la solución haz la pregunta siguiente, de este modo será útil a los demás. Si vas cambiando el escenario inicial de la pregunta es un lio porque la respuesta tambien cambia y no es util
    – masterguru
    Commented el 24 may. 2022 a las 7:43

1 respuesta 1

1

Esta es mi propuesta de solución para tu pregunta. El código está comentado y es autoexplicativo. He usado el elemento HTML template y la interfaz documentFragment para la generación de las filas.

function duplicarFila() {
  // analizamos si es la primera fila o no
  if($("table tr").length > 0) {
        // definimos intervalo
        let intervalo = 50
    // leemos el dato anterior
    tiempo = $("table tr:last").find("a").first("a").attr('data-h');
    // sumamos el intervalo que deseamos
    tiempo = parseInt(tiempo) + intervalo
    // creamos fila
    crearFila(tiempo)
  } else {
    // si es la primera creamos fila con valor inicial
    crearFila('0')
  }
}

function crearFila(hour) {
  // añadimos ceros a la izquierda
  let valor4digitos = hour.toString().padStart(4, "0")
  // partimos en dos trozos de 2 caracteres la cadena de 4 dígitos anterior
  let trozos = $(valor4digitos.match(/.{2}/g))
  // convertimos el 50 en 30 para representar la mediahora
  if(trozos[1] == 50) trozos[1] = 30
  // establecemos la hora
  let hora = trozos[0] + ":" + trozos[1]
  // asignamos a un objeto jquery el DOM de la plantilla
  const plantillaFila = $(document.getElementById('plantilla-fila').content);
  // creamos un fragmento en memoria
  const fragment = $(document.createDocumentFragment());
  // modificamos la hora
  plantillaFila.find("a[data-cid='1']").html(hora)
  // modificamos el atributo data-h en todos los enlaces <a>
  plantillaFila.find("a").attr('data-h', valor4digitos)
  // clonamos la plantilla en una nueva variable
  const clone = plantillaFila.clone(true)
  // agregamos el clon en el fragmento
  fragment.append(clone)
  // agregamos el fragmento en la tabla
  $("table").append(fragment)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="duplicarFila()">
  Duplicar fila o iniciar filas
</button>

<table></table>

<template id="plantilla-fila">
  <tr class="fila">
    <td class="tfsize">
      <a href="" class="update fila sinEspacio editable editable-click" data-name="name" data-type="text" data-pk="1" data-sid="1" data-cid="1" data-d="lunes" data-h="500" data-title="Ingresar valor">05:00</a>
    </td>
    <td class="tfsize">
      <a href="" class="update fila sinEspacio editable editable-click" data-name="name" data-type="text" data-pk="1" data-sid="1" data-cid="2" data-d="lunes" data-h="500" data-title="Ingresar valor">645</a>
    </td>
    <td class="tfsize">
      <a href="" class="update fila sinEspacio editable editable-click" data-name="name" data-type="text" data-pk="1" data-sid="1" data-cid="3" data-d="lunes" data-h="500" data-title="Ingresar valor">302</a>
    </td>
    <td class="tfsize">
      <a href="" class="update fila sinEspacio editable editable-click" data-name="name" data-type="text" data-pk="1" data-sid="1" data-cid="4" data-d="lunes" data-h="500" data-title="Ingresar valor">27</a>
    </td>
    <td class="tfsize">
      <a href="" class="update fila sinEspacio editable editable-click" data-name="name" data-type="text" data-pk="1" data-sid="1" data-cid="7" data-d="lunes" data-h="500" data-title="Ingresar valor">400</a> </td>
    <td class="tfsize">
      <!-- $fila->columna_id -->
      <span data-toggle="modal" data-target="#confirmDeletion">
        <button id="delete-button-4" class="deleteFila btn btn-xs btn-danger sinEspacio text-white" data-toggle="modal" data-sid="1" data-d="lunes" data-h="500" data-target="#exampleModal" data-placement="bottom" title="Eliminar" onclick=""><i class="material-icons md-10">delete</i></button>
      </span>
    </td>
  </tr>
</template>

A partir de aquí se puede hacer lo que se quiera con los id que se repitan y lo que haga falta para modificar la plantilla inicial.

Dejo a tu cargo la filtración de las horas, pues debes evitar que pasen de las 23:59 si pulsan demasiadas veces el botón.

12
  • no logro que me funcione. He agregado el tag "template" justo antes de cerrar la etiqueta "tbody", es decir, <table><thead></thead><tbody> //todos mis datos <template></template></tbody></table> ¿crees que sea correcto?
    – Carlos
    Commented el 27 may. 2022 a las 5:56
  • Muchas gracias, @masterguru. Ya funciona perfectamente. Me gustaría preguntarte una cosa más.. ¿Cuál es el camino correcto a seguir en caso de tener más de una tabla (diferentes) en una misma pantalla? tengo que crear un "duplicarFilas" y un "crearFila" por cada tabla? porque el template está claro que sí, pero duplicar las funciones anteriormente mencionadas me parece un poco "parche" ¿hay alguna forma de obtener el template cuyo botón haya sido presionado? en otras palabras ¿es posible que con esas dos funciones pueda crear filas de diferentes tablas dependiendo el botón presionado?
    – Carlos
    Commented el 27 may. 2022 a las 6:23
  • Sí, en realidad son 7 tablas (sé que no es lo ideal pero es lo tengo que hacer). Entonces hay 7 tablas en una misma pantalla y cada una tiene su botón de "agregar fila". Lo que intenté preguntarte en el comentario anterior era si había posibilidad de que cada uno de esos botones llamara a la misma función y que ésta detectara cuál botón había sido presionado para crear la fila en una tabla u otra, pero creo que finalmente copiaré y pegaré 14 veces. (2 funciones por tabla). Estoy muy agradecido contigo, muchas gracias.
    – Carlos
    Commented el 27 may. 2022 a las 6:50
  • Ahora lo que me falta por resolver es notificar a mi servidor de la creación de las filas, supongo que habrá que llamar a una función que haga una petición a través de ajax
    – Carlos
    Commented el 27 may. 2022 a las 6:51
  • Consulta este enlace para verlo en dos tablas: jsfiddle.net/pah3m0t5 (fijate que he quitado una de las funciones de la respuesta para integrar lo del calculo de la hora dentro del switch)
    – masterguru
    Commented el 27 may. 2022 a las 7:27

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.