Agregar fila tabla y poder editarla
Publicado por marco (1 intervención) el 24/10/2019 17:55:42
Buenas que tal, estoy con un proyecto, el cual, me esta dando quebraderos de cabeza, porque, tengo los elementos para editar una fila de una tabla y recalcular totales, y tengo elementos para añadir filas, pero lo que no consigo es pintar una fila sin actualizar la pagina, y poder editar las celdas y que me calcule el total.
He intentado, javascript, ajax, jquery, post..datatables.. y no veo nada nada nada en internet que me sirva.
Alguien ha hecho algo parecido? Saludos y gracias!
Aqui el JS de edicion de campos
Aqui el HTML de creacion de la tabla
Aqui el Jquery, una de las formas de añadir una fila, la mas simple, he probado muchas mas complejas.
He intentado, javascript, ajax, jquery, post..datatables.. y no veo nada nada nada en internet que me sirva.
Alguien ha hecho algo parecido? Saludos y gracias!
Aqui el JS de edicion de campos
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
$('#t_prespuesto_detalles tbody').on( 'click', 'tr', function () {
//$('#t_prespuesto_detalles tr').on('click',function(){
$(this).closest("tr").find(".precioEdit").removeClass("d-none");
$(this).closest("tr").find(".precioText").addClass("d-none");
$(this).closest("tr").find(".cantidadEdit").removeClass("d-none");
$(this).closest("tr").find(".cantidadText").addClass("d-none");
$(this).closest("tr").find(".importeEdit").removeClass("d-none");
$(this).closest("tr").find(".importeText").addClass("d-none");
//} );
} );
//$('.t_prespuesto_detalles tbody').on( 'change','precioEdit', function () {
$('.precioEdit').on('change',function(){
var coddetalle = $(this).attr('data-id');
var codpresupuesto = $('#codigopres').val();
precio= $(this).closest("tr").find(".precioEdit").val();
$(this).closest("tr").find(".precioText").html(precio);
cantidad= $(this).closest("tr").find(".cantidadEdit").val();
$(this).closest("tr").find(".cantidadText").html(cantidad);
importe=$(this).closest("tr").find(".importeEdit").val( precio * cantidad);
//console.log('ddd');
importe2 = precio * cantidad;
total(precio, cantidad, importe2, coddetalle, codpresupuesto);
//} );
} );
$('.cantidadEdit').on('change',function(){
var coddetalle = $(this).attr('data-id');
var codpresupuesto = $('#codigopres').val();
precio= $(this).closest("tr").find(".precioEdit").val();
$(this).closest("tr").find(".precioText").html(precio);
cantidad= $(this).closest("tr").find(".cantidadEdit").val();
$(this).closest("tr").find(".cantidadText").html(cantidad);
importe=$(this).closest("tr").find(".importeEdit").val( precio * cantidad);
importe2 = precio * cantidad;
total(precio, cantidad, importe2, coddetalle, codpresupuesto);
} );
function total(precio, cantidad, importe, coddetalle, codpresupuesto) {
var table = document.getElementById("t_prespuesto_detalles");
var rowCount = $("#t_prespuesto_detalles").DataTable().rows().count(); //funciona
//var importes = $('td', $("#t_prespuesto_detalles tbody tr")).eq(4).text();
importes=0;let lstNumero = document.getElementsByClassName("importeEdit"),
arrayGuardar = [];
for (var i = 0; i < lstNumero.length; i++) {
arrayGuardar[i] = lstNumero[i].value;
importes = importes + parseFloat(lstNumero[i].value);
//console.log (lstNumero[i].value);
} pvp_base = importes;pvp_iva = importes * 1.21;
pvp_iva = pvp_iva - pvp_base;
pvp_total = pvp_base + pvp_iva;
//$("#totalcolumna").html(importes.toFixed(2));
$("#pvp_base").html(number_format(pvp_base, 2)); // BASE
$("#pvp_iva").html(number_format(pvp_iva, 2)); // IVA
$("#pvp_total").html(number_format(pvp_total, 2)); // TOTAL
//GUARDAR FILA PRECIO
//GUARDAR FILA CANTIDAD
//GUARDAR FILA IMPORTE
//GUARDAR PRESUPUESTO TOTAL
var url = $('#url').val();
//importes = number_format(importes, 2);
//importe = number_format(importe, 2);
pvp_base = pvp_base.toFixed(2);
pvp_iva = pvp_iva.toFixed(2);
pvp_total = pvp_total.toFixed(2);
importe = importe.toFixed(2);
//console.log(importe);
//console.log(importes);
console.log(pvp_base);
console.log(pvp_iva);
console.log(pvp_total);
$.post(url+"presupuestos/guardarcambios_pci/", {
coddetalle : coddetalle,
codpresupuesto : codpresupuesto,
precio : precio,
importe : importe,
cantidad : cantidad,
pvp_base : pvp_base,
pvp_iva : pvp_iva,
pvp_total : pvp_total}, function(data) {
//console.log('Todo ok');
});
}Aqui el HTML de creacion de 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
<table class="table table-bordered table-striped " id="t_prespuesto_detalles"> <!-- dt-responsive nowrap-->
<thead>
<tr>
<th>Presupuesto</th>
<th>Ref. Proveedor</th>
<th>Descripción</th>
<th>Precio Ud.</th>
<th>Cantidad</th>
<th>Importe</th>
<th>Unidades</th>
<th>Acción</th>
</tr>
</thead>
<tbody class="elementos">
</tbody>
<tfoot>
<tr>
<th colspan="5" style="text-align:right">Base:</th>
<th class="text-right" id="pvp_base"><?php echo number_format($suma,2); ?> €</th>
<th id=""><p></p></th>
<th id=""></th>
</tr>
<tr>
<th colspan="5" style="text-align:right">IVA (21%):</th>
<th class="text-right" id="pvp_iva"><?php echo number_format($iva,2); ?> €</th>
<th id=""><p></p></th>
<th id=""></th>
</tr>
<tr>
<th colspan="5" style="text-align:right">Total:</th>
<th class="text-right" id="pvp_total"><?php echo number_format($total,2); ?> €</th>
<th id=""><p></p></th>
<th id=""></th>
</tr>
</tfoot>
</table>
Aqui el Jquery, una de las formas de añadir una fila, la mas simple, he probado muchas mas complejas.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$('#btn_insertar').click( function () {
output = '<tr>
<td scope="row">1123</td>
<td scope="row">123</td>
<td>123</td>
<td class="precio"><span class="precioText">2</span> <input type="text" class="precioEdit d-none" name="precio" value="2"/></td>
<td class="cantidad"><span class="cantidadText">2</span> <input type="text" class="cantidadEdit d-none" name="cantidad" value="2"/></td>
<td class="sumafila"><span class="importeText">2</span> <input type="text" class="importeEdit d-none" name="importe" value="2"/></td>
<td align="right">123</td>
<td align="right">123</td>
<td align="right">123</td>
<td align="right">123</td>
</tr>'';
$(".elementos").html(data);
});
Valora esta pregunta
0
