Como sumar valores en filas dinamicas

[Chelo_70]

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