Jump to content

Como sumar valores en filas dinamicas


Recommended Posts

Estimado amigos de Chile comparte, junto con saludarlos, les escribo para pedirles ayuda, estoy aprendiendo JQuery y tengo un pequeño problema, resulta que tengo un formulario el cual genera filas en forma dinámica con JQuery, pero el tema es que requiero que sume los valores hacia el lado por cada fila creada y posteriormente sume los totales, todo automático, sin presionar botones y ahí el problema, he buscado información y no he logrado dar con la solución, si alguien pudiera ayudarme se lo agradecería.

 

Adjunto código por si les sirve.

 

HTML

 

<table>

<tr>
<td colspan="5" style="text-align: right;"><button type="button" class="btn btn-success" id="btn_agregar">Nuevo Item</button></td>
</tr>

</table>

<tr>
<td colspan="5">
<table class="table" width="100%" border="0">
<tr>
<th class="titTablas" style="width: 70px;">CANTIDAD</th>
<th class="titTablas" style="width: 300px;">DESCRIPCIÓN</th>
<th class="titTablas" style="width: 120px;">PRECIO UNITARIO</th>
<th class="titTablas" style="width: 120px;">TOTAL</th>
<th></th>
</tr>
</table>
<table class="table" id="tabla" width="100%" border="0">
<tr>
<td style="width: 70px;"><input type="text" name="txt_cant[]" id="txt_cant" style="width: 57px;"></td>
<td style="width: 300px;"><input type="text" name="txt_desc[]" id="txt_desc" style="width: 280px;"></td>
<td style="width: 120px;"><input type="text" name="txt_pre_unit[]" id="txt_pre_unit" style="width: 103px;"></td>
<td style="width: 120px;"><input type="text" name="txt_pre_tot[]" id="txt_pre_tot" style="width: 103px;"></td>
<td><!--<img src="<?php //echo base_url(); ?>public/images/Close.png" width="17" height="17" id="borrarFila" title="Eliminar">--></td>
</tr>
</table>
<table class="table" width="100%" border="0">
<tr>
<td style="width: 70px;"></td>
<td style="width: 300px;"></td>
<td style="width: 120px;" class="subTitTablas">SUBTOTAL</td>
<td style="width: 120px;"><input type="text" name="txt_subtotal" id="txt_subtotal" style="width: 103px;"></td>
<td></td>
</tr>
</table>
<table class="table" width="100%" border="0">
<tr>
<td style="width: 70px;"></td>
<td style="width: 300px;"></td>
<td style="width: 120px;" class="subTitTablas">IMPUESTO</td>
<td style="width: 120px;"><input type="text" name="txt_impuesto" id="txt_impuesto" style="width: 103px;"></td>
<td></td>
</tr>
</table>
<table class="table" width="100%" border="0">
<tr>
<td style="width: 70px;"></td>
<td style="width: 300px;"></td>
<td style="width: 120px;" class="subTitTablas">TOTAL</td>
<td style="width: 120px;"><input type="text" name="txt_total" id="txt_total" style="width: 103px;"></td>
<td></td>
</tr>
</table>
JQUERY
$('#btn_agregar').click(function(){
agregarFila();
});
var cont=1;
function agregarFila(){
cont++;
$("#tabla")
.append(
$('<tr>')
.append(
$('<td>').attr('style', 'width:70px')
.append(
$('<input>').attr('type', 'text').attr('name', 'txt_cant[]').attr('style', 'width:57px').attr('id', 'txt_cant')
)
)
.append(
$('<td>').attr('style', 'width:300px')
.append(
$('<input>').attr('type', 'text').attr('name', 'txt_desc[]').attr('style', 'width:280px').attr('id', 'txt_desc[]')
)
)
.append(
$('<td>').attr('style', 'width:120px')
.append(
$('<input>').attr('type', 'text').attr('name', 'txt_pre_unit[]').attr('style', 'width:103px').attr('id', 'txt_pre_unit')
)
)
.append(
$('<td>').attr('style', 'width:120px')
.append(
$('<input>').attr('type', 'text').attr('name', 'txt_pre_tot[]').attr('style', 'width:103px').attr('id', 'txt_pre_tot')
)
)
.append(
$('<td>')
.append(
$('<img>').attr('src', 'http://localhost/cotizaonline/public/images/Close.png').attr('width','17').attr('height', '17').attr('id', 'borrarFila')
)
)
);
}

 

 

Saludos y gracias

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...