Calcular Total de una tabla
Publicado por José Maria (7 intervenciones) el 12/09/2018 01:08:07
Buenas amigos, llevo ya demasiado dándole vueltas a este código y sé que el fallo tiene que ser un pequeño detalle, pero no soy capaz de verlo.
Os comento tengo un formulario que le das al boton añadir y te crea un nuevo input.
Mi idea es sumar todos esos input y crear un total.
el caso es que quiero que si el usuario cambia la cantidad, me cambie el total tambien, lo consigo pero solo con el primer input, con los que voy añadiendo ya no, me hace la suma correcta, pero tengo que borrar los datos del primero o hacer algo para que calcule el nuevo total.
Os dejo el codigo a ver si alguien puede ayudarme:
EL HTML:
y el script
Os comento tengo un formulario que le das al boton añadir y te crea un nuevo input.
Mi idea es sumar todos esos input y crear un total.
el caso es que quiero que si el usuario cambia la cantidad, me cambie el total tambien, lo consigo pero solo con el primer input, con los que voy añadiendo ya no, me hace la suma correcta, pero tengo que borrar los datos del primero o hacer algo para que calcule el nuevo total.
Os dejo el codigo a ver si alguien puede ayudarme:
EL HTML:
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
<div class="container col-xs-12">
<h2 align="center">CALCULAR TOTAL</h2>
<div class="form-group">
<form name="add_name" id="add_name">
<div class="alert alert-danger print-error-msg" style="display:none">
<ul></ul>
</div>
<div class="alert alert-success print-success-msg" style="display:none">
<ul></ul>
</div>
<div class="table-responsive" id="tabladinamica">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><input type="number" name="number[]" placeholder="Introduce un numero" class="form-control numero" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Añadir</button></td>
</tr>
</table>
<div class="form-group">
{{ Form::label('TOTAL') }}
<input type="text" name="total" readonly class="form-control" id="total" />
</div>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>
y el script
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
<script>
$(document).ready(function(){
var postURL = "<?php echo url('addmore'); ?>";
var i=1;
$('#add').click(function(){ /*Al hacer clic en el boton de añadir me añade los elementos necesarios para añadir*/
i++;
$('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><input type="number" name="number[]" placeholder="Introduce un numero" class="form-control numero"/></td></tr>');
});
$(document).on('click', '.btn_remove', function(){ /*Al hacer clic en borrar, borramos la fila creada*/
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
// Me creo una funcion para sumar el array que contiene los numeros
$('.numero').each(function () {
$(this).keyup(function () {
//Iniciamos la variable a 0
var total = 0;
$('.numero').each(function () {
if(!isNaN(this.value) && this.value.length != 0) {
total += parseFloat(this.value);
}
});
$('#total').val(total.toFixed(2));
});
});
});
</script>
Valora esta pregunta


0