Foros del Web » Programando para Internet » Jquery »

Añadir filas a tabla y hacer acciones con las nuevas filas

Estas en el tema de Añadir filas a tabla y hacer acciones con las nuevas filas en el foro de Jquery en Foros del Web. Hola que tal. Tengo la siguiente estoy probando lo de agregar nuevas filas en una tabla pero mi problema es que no encuentro la forma ...
  #1 (permalink)  
Antiguo 02/05/2013, 09:13
 
Fecha de Ingreso: junio-2009
Mensajes: 145
Antigüedad: 14 años, 10 meses
Puntos: 0
Añadir filas a tabla y hacer acciones con las nuevas filas

Hola que tal. Tengo la siguiente estoy probando lo de agregar nuevas filas en una tabla pero mi problema es que no encuentro la forma de realizar operaciones en las nuevas filas digamos calcular el importe dado una cantidad y un precio unitario la cuestion es como puede haber 1 o 10 filas como identificar las operaciones en cada fila coloco lo que llevo espero q alguien me pueda decir como solucionarlo

html (solo coloco la estructura de la fila )

<tr id="0" class="filas">
<td> <input type="text" name="cantidad[]" id="cantidad-2" class="cantidad" size="3" /> </td>
<td>
<select name="insumo[]" id="insumo">
<option value=""> Selecciona </option>
</select>
</td>
<td> $ <input type="text" name="precio_unitario[]" id="precio_unitario-2" class="precio_unitario" size="8" /> </td>
<td> $ <input type="text" name="importe[]" id="importe-2" class="importe" size="8" /> </td>
</tr>

funcion jquery para añadir una fila nueva clona la tr anterior

$("#add_fila").click(function(evento){

evento.preventDefault();

var nt = $('table tr').length +1; // numero de fila

$("table tr:eq(1)").clone(true).attr("id", nt).removeClass('filas').appendTo("table");
});

lo siguiente que quiero hacer es una funcion que cuando cambie la cantidad me busque el precio unitario de la misma fila y lo coloco en el input importe esto es lo que llevo, intente ontenerlo segun al padre de los 2 input y buscarlo segun su hermano pero como los 2 input estan dentro de un td no es ni hijo o hermano directo

$("#cuentas tr td input.cantidad").change(function(){

var identificador = $(this).closest("tr").attr("id"); // id de la fila padre

var precio_unitario = $($(this).closest("tr") > "td input.precio_unitario").val();

var precio_unitario = $(this).siblings(".precio_unitario").val();
});


gracias de antemano y espero haberme explicado correctamente
  #2 (permalink)  
Antiguo 02/05/2013, 11:34
(Desactivado)
 
Fecha de Ingreso: abril-2013
Ubicación: rosario
Mensajes: 248
Antigüedad: 11 años
Puntos: 17
Respuesta: Añadir filas a tabla y hacer acciones con las nuevas filas

Chelo: segun lo q entendi lo que queres hacer es como un formulario de facturacion, asi que te paso el ejmplo que hice.
Eso si el evento del input.cantidad lo cambie a blur, ya que change no es un evento de input.
en fin te dejo el ejmplo

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>
jQuery(document).ready(function() {

jQuery("#cuentas tr td input.cantidad").blur(function(){

var _punit = jQuery(this).parent('td').parent('tr').find('input .precio_unitario');
var _pimporte = jQuery(this).parent('td').parent('tr').find('input .importe');
_pimporte.val(jQuery(this).val() * _punit.val());



});
});


</script>
</head>
<body>

<table id="cuentas">
<tr id="0" class="filas">
<td> <input type="text" name="cantidad[]" id="cantidad-1" class="cantidad" size="3" /> </td>
<td>
<select name="insumo[]" id="insumo">
<option value=""> Selecciona </option>
</select>
</td>
<td> $ <input type="text" name="precio_unitario[]" id="precio_unitario-1" class="precio_unitario" size="8" /> </td>
<td> $ <input type="text" name="importe[]" id="importe-1" class="importe" size="8" /> </td>
</tr>

<tr id="1" class="filas">
<td> <input type="text" name="cantidad[]" id="cantidad-2" class="cantidad" size="3" /> </td>
<td>
<select name="insumo[]" id="insumo">
<option value=""> Selecciona </option>
</select>
</td>
<td> $ <input type="text" name="precio_unitario[]" id="precio_unitario-2" class="precio_unitario" size="8" /> </td>
<td> $ <input type="text" name="importe[]" id="importe-2" class="importe" size="8" /> </td>
</tr>


<tr id="2" class="filas">
<td> <input type="text" name="cantidad[]" id="cantidad-3" class="cantidad" size="3" /> </td>
<td>
<select name="insumo[]" id="insumo">
<option value=""> Selecciona </option>
</select>
</td>
<td> $ <input type="text" name="precio_unitario[]" id="precio_unitario-3" class="precio_unitario" size="8" /> </td>
<td> $ <input type="text" name="importe[]" id="importe-3" class="importe" size="8" /> </td>
</tr>
</table>
</body>


</html>
  #3 (permalink)  
Antiguo 02/05/2013, 22:06
 
Fecha de Ingreso: junio-2009
Mensajes: 145
Antigüedad: 14 años, 10 meses
Puntos: 0
Respuesta: Añadir filas a tabla y hacer acciones con las nuevas filas

diurno10 gracias me sirvio a la perfeccion

Etiquetas: acciones, filas, nuevas, tabla
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:52.