0

Estoy buscando la forma de crear una funcionalidad de Jquery o lo alguna tecnología que lo desconozco, que me permita crear una fila en una tabla, para ello, que se base (copie) los datos que tiene la última fila, que inserte dicha fila al final de la tabla y que notifique a mi servidor de la creación de dicha tabla, pero no tengo ni idea de cómo hacerlo.

Mi sitio está hecho con PHP 8 + Laravel 9, yo devuelvo dos arrays, uno con los nombres de todas las columnas y otro con los datos (filas) que se deben cargar, pero quiero darle la posibilidad al usuario de crear más filas, la futura función que creara las filas deberá tener en cuenta la cantidad de columnas que hay o clonar el último tr (fila) con todos sus td.

Ejemplo: Columna 1, Columna 2 Fila X, Fila Y Fila X+1, Fila Y+1 Cuando haga clic en añadir debería copiar los datos de la última fila.

Estaba probando con esto, pero ni idea si es lo correcto:

        function agregarFila() {
        var columnas=6;
        var i;
        var htmlTags = '<tr class="fila">';
        for(i=0; i<=columnas.length-1; i++){
            htmlTags = htmlTags + '<td>' + '0'+ '</td>';
        }
        htmlTags = htmlTags + '</tr>';             
        $('#lunes tbody').append(htmlTags);
}

Mi tabla es la siguiente:

       <table class="table table-bordered data-table" id="lunes">
            <thead class="nombreTitulo">
                <tr>
                    @foreach($columnas as $columna)
                        <th class="centrar">
                            <a href="" class="colorId" data-name="name" data-type="text" data-pk="1" data-title="Id de columna">{{ $columna->id }}</a>
                        </th>
                    @endforeach
                </tr>
                <tr>
                    @foreach($columnas as $columna)
                        <th>
                            <a href="" class="updateCol columna verticalText negrita" data-name="name" data-type="text" data-sid = "{{$servicio->id}}" data-cid = "{{$columna->id}}" data-pk="1" data-title="Ingresar nombre columna">{{$columna->nombre_p}}</a>
                        </th>
                    @endforeach
                    <th class="verticalText negrita">ACCIÓN</th>
                </tr>
                <tr>
                    <td class="diaSemana" colspan=6>Lunes</td>
                </tr>
            </thead>
            <tbody>
                @forelse($tabla as $fila)
                    <tr class="fila">
                        @foreach($fila as $columna=>$celda)
                        <td>
                                <input class="updatechx" type="checkbox" data-toggle="toggle" id="toggle" value="ON" data-on="ON" data-off="OFF" data-onstyle="success" data-offstyle="danger" data-sid = "{{ $celda['sid'] }}" data-cid = "{{ $celda['cid'] }}" data-d = "{{ $celda['d'] }}" data-h = "{{$celda['h']}}" data-title="Ingresar valor" checked>
                            @else
                                @if($celda['cid'] == 1)
                                <div class="reloj" style="position: relative">
                                <input class="form-control reloj updateh" data-name="name" type="time" data-pk="1" data-type="time" id="datetime" data-sid = "{{ $celda['sid'] }}" data-d = "{{ $celda['d'] }}" data-h = "{{$celda['h']}}" value="{{ $celda['valor'] }}" data-title="Ingresar valor" />
                                </div>
                                @else
                                <a href="" class="update fila" data-name="name" data-type="text" data-pk="1" data-sid = "{{ $celda['sid'] }}" data-cid = "{{ $celda['cid'] }}" data-d = "{{ $celda['d'] }}" data-h = "{{$celda['h']}}" data-title="Ingresar valor">{{ $celda['valor'] }}</a>
                                @endif
                            @endif
                        </td>   
                        @endforeach
                        <td> <!-- $fila->columna_id -->
                        <span data-toggle="modal" data-target="#confirmDeletion">
                            <button id="{{ 'delete-button-'.$loop->index }}" class="deleteFila btn btn-sm btn-danger text-white" data-toggle="modal" data-sid = "{{$celda['sid']}}" data-d = "{{$celda['d']}}" data-h = "{{$celda['h']}}" data-target="#exampleModal" data-placement="bottom" title="Eliminar" onclick=""><i class="material-icons mic">delete</i></button>
                        </span>
                        </td>
                    </tr>
                @empty
                @endforelse
            </tbody>
        </table>
        <div id="addFila">
            <td> <!-- $fila->columna_id -->
                <a class="add-row btn btn-success" data-sid="$celda['sid']" data-d="$celda['d']" onclick="agregarFila();">Agregar fila</a>
            </td>
        </div>

1 respuesta 1

0

en JQuery existe la función :last, o sea, con algo como esto podrías clonar la fila

var ultima_celda=$("table tr:last");
$("table tr:last").append(ultima_celda);
4
  • Muchas gracias, Disquete. ¿Cómo crees que sería la comunicación con el servidor? porque cada celda tiene varios id (id del servicio al que pertenece, id de la columna que pertenece, hora, día), para que esa nueva fila sea parte de la tabla (id servicio, id columna y el día tienen que ser exactamente el mismo que la fila anterior, pero la hora no, debe ser diferente, aunque sea 1 minuto. ¿Cómo puedo alterar eso?
    – Carlos
    Commented el 18 may. 2022 a las 5:08
  • habría que saber cómo está echa la parte servidor. Si estás usando API Rest y devuelves un json, en teoría deberías de tener algún método para hacerlo, y llamarlo desde AJAX y usando $.get o usando opciones similares como Api Fetch. Usando AJAX debería de poderse, aunque no tengo claro como se edita la información. También se podría usar php. De una forma u otra, te diría que el tipo de dato para almacenar la fecha y hora es datetime.
    – Disquete
    Commented el 19 may. 2022 a las 19:07
  • Hola, estoy usando Laravel 9 con PHP 8. Puedo definir una ruta similar a tabla/{sid}/{cid}/{etc} y crear una función en el controlador que dé de alta la nueva fila en base de datos, no obstante, no sé cómo hacer para que: 1) Si no hay una fila que cree una 2)Cuando clone una fila que copie todos los datos pero que a la hora le sume 1. Internamente necesito la hora representada como numérico (larga historia pero créeme que es así), no obstante, yo la represento como XX:XX
    – Carlos
    Commented el 20 may. 2022 a las 11:27
  • 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.
    – Carlos
    Commented el 20 may. 2022 a las 11:33

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.