¿Cómo crear dinámicamente filas en una tabla (table/html) en PHP/Laravel con info de AJAX?
Publicado por jim (1 intervención) el 07/08/2017 17:38:00
¿Cómo hacer para crear/generar dinámicamente filas en una tabla (table/html) que contiene 14 columnas donde cada una de ellas es un listbox y las 3 primeras(listbox's o select's) provienen de datos de una consulta Ajax y son select dependientes? mas o menos en el patron: padre, hijo, nieto.
El tema es que inicialmente la tabla solo tendría una sola fila. Al hacer click en un boton se debe generar o añadir una nueva fila a dicha tabla.
El detalle también está, quizás el punto principal y que no sé como enfocar, es que tanto la fila, como cada (select o listbox) y casi que, como cada celda de la tabla debe ser parametrizable. Es decir, luego de creada la fila, debo ser capaz de recuperar la información de la fila con los valores de dichos list box. Debería poder hacer referencia a una fila, a una columna.
A ver si con una imagen me explico mejor.
Y este sería mi código HTML que me generaría la tabla.
Y aquí el JS
En principio solo debería aparecer una sola fila, pero para fines del post, he puesto tres filas.
De cualquier forma creo que la duda principal no solo es como pintar la fila como tal con todo lo que ello conlleva, sino luego, como recuperar los datos de cada una de las filas.
Supongo que de alguna forma se debe generar dinámicamente un id para cada fila o algo asi. Tipo idfila+variable
Pues en resumen es eso, la primera vez aparecerá una sola fila y al clickar en el boton de NUEVO OBJETIVO, se debe añadir-generar-crear una NUEVA FILA en la tabla html y todo lo que ello conlleva (generación de listbox, etc) para luego poder hacer referencia a CADA FILA Y CADA CELDA para por último recoger esa información y guardarla en la BBDD.
Estas son las dos funciones con las respetivas consultas ajax para cargar la info de la BBDD y poblar o pintar las select o listbox.
Ufff, que largo y complicado. Espero haberme explicado medianamente bien.
El tema es que inicialmente la tabla solo tendría una sola fila. Al hacer click en un boton se debe generar o añadir una nueva fila a dicha tabla.
El detalle también está, quizás el punto principal y que no sé como enfocar, es que tanto la fila, como cada (select o listbox) y casi que, como cada celda de la tabla debe ser parametrizable. Es decir, luego de creada la fila, debo ser capaz de recuperar la información de la fila con los valores de dichos list box. Debería poder hacer referencia a una fila, a una columna.
A ver si con una imagen me explico mejor.
Y este sería mi código HTML que me generaría la tabla.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<table class="table table-bordered" id="mytable">
<tr>
<th>PROYECTOS</th>
<th>TAREAS</th>
<th>SUBTAREAS</th>
<th>LUN</th>
<th>MAR</th>
<th>MIE</th>
<th>JUE</th>
<th>VIE</th>
<th>SAB</th>
<th>DOM</th>
</tr>
<tr>
<td>
<!-- __________________SELECTOR DE PROYECTOS________________________ --><select id="proyectoselect" class="proyectoselect js-example-basic-single-hide-search" data-width="160px">
<option>--- Proyectos ---</option>
@foreach($objetivos as $objetivo)
@if ($objetivo->padre===0)
<option value="{{ $objetivo->id }}">{{ $objetivo->nombretarea }}</option>
@endif
@endforeach
</select>
</td>
<td>
<!-- __________________SELECTOR DE TAREAS ________________________ --><select id="tareaselect" class="tareaselect js-example-basic-single-hide-search" data-width="160px">
</select>
</td>
<td>
<!-- __________________SELECTOR DE SUBTARRAS ________________________--><select id="subtareaselect" class="subtareaselect js-example-basic-single-hide-search " data-width="160px">
</select>
</td>
<td>
<!-- __________________SELECTOR DE LUNES ________________________--><select id="selectlun" class="selectlun js-example-basic-single" data-width="55px">
<option>-</option>
<option>1</option>
. . . .<option>5</option>
</select>
</td>
(Y ASI, UNA SELECT POR CADA DIA)
<td>
<button type="button" class="borrar btn btn-danger">
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
<td>
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-ok"></span>
</button>
</td>
</tr>
Y aquí el JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
//----------------------------select de TAREAS --------------------------
$(".proyectoselect").change(function() {
$(".tareaselect").prop("disabled", false);
$('#tareaselect').empty();
$('#subtareaselect').empty();
id_selected = $(this).val();
$.ajax({
type: "GET",
url: 'listartareas/'+id_selected,
dataType : 'text',
success: function(data){
var datados = JSON.parse(data);
$.each(JSON.parse(datados), function(key, value) {
$('#tareaselect')
.append($("<option></option>")
.attr("value",value.id)
.text(value.nombretarea));
});
},
error: function(data) {
alert('error');
}});
});
//---------------------------select de SUBTAREAS --------------------------
$(".tareaselect").change(function() {
$(".subtareaselect").prop("disabled", false);
$('#subtareaselect').empty();
id_selected = $(this).val();
$.ajax({
type: "GET",
url: 'listartareas/'+id_selected,
dataType : 'text',
success: function(data){
var datados = JSON.parse(data);
$.each(JSON.parse(datados), function(key, value) {
$('#subtareaselect')
.append($("<option></option>")
.attr("value",value.id)
.text(value.nombretarea));
});
},
error: function(data) {
alert('error');
}});
});
En principio solo debería aparecer una sola fila, pero para fines del post, he puesto tres filas.
De cualquier forma creo que la duda principal no solo es como pintar la fila como tal con todo lo que ello conlleva, sino luego, como recuperar los datos de cada una de las filas.
Supongo que de alguna forma se debe generar dinámicamente un id para cada fila o algo asi. Tipo idfila+variable
Pues en resumen es eso, la primera vez aparecerá una sola fila y al clickar en el boton de NUEVO OBJETIVO, se debe añadir-generar-crear una NUEVA FILA en la tabla html y todo lo que ello conlleva (generación de listbox, etc) para luego poder hacer referencia a CADA FILA Y CADA CELDA para por último recoger esa información y guardarla en la BBDD.
Estas son las dos funciones con las respetivas consultas ajax para cargar la info de la BBDD y poblar o pintar las select o listbox.
Ufff, que largo y complicado. Espero haberme explicado medianamente bien.
Valora esta pregunta
0