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>