Jquery trabajar con inputs dentro de td

Dundee · #1 (**permalink**) 17/12/2010, 04:26

Hola gente, el tema es que clono un div y dentro de este tengo una tabla con inputs y selects, pero no me funciona el tema bien.

¿Como puedo llegar a un input dentro de un div y a su vez de una tabla?

Código:

//Para clonar el DIV
$newClone = $('#div_'+clickID).clone(true);

//Para asignarle nueva id a cada input (en este caso al primero)
$newClone.children("input").eq(0).attr("id","nombre"+newID);

Si quito la tabla y dejo todos los campos dentro solo del DIV funciona perfectamete, el problema es cuando quiero tabular los campos con tablas.

¿Alguien me podría indicar como tengo que hacer esto?.

Mil gracias

Dany_s · #2 (**permalink**) 17/12/2010, 05:33

postea la estructura de esa tabla

Dundee · #3 (**permalink**) 17/12/2010, 06:31

Cita:

Iniciado por Dany_s

postea la estructura de esa tabla

Código:

<div id="div_1" style="float:left">
<table >
<tr>
<td><span class="item">Name</span></td>
<td><input  type="text"  name="nombre[]"  style="width:200px;" id="nombre1" /></td>

<td><span class="item">Vat:</span></td>
<td><input type="text"   name="dni[]"  style="width:140px;" id="dni1" /></td>

<td><span class="item" >Fecha nacimiento:</span> <select name="dia[]" id="dia1"> 
<option value="0" selected='selected'>Dia</option>
<?php carga_dias(); ?>
</select>
</td>

<td><select name="mes[]" id="mes1"> 
<option value="0" selected='selected'>Mes</option>
<?php carga_mes(); ?>
</select>
</td>

<td><select name="ano[]" id="ano1"> 
<option value="0" selected='selected'>A&ntilde;o</option>
<?php carga_ano(); ?>
</select>
</td>

<td><input class="bt_plus" id="1" type="button" value="+" /></td>
</tr>
</table>	
</div>

El tema es que cuando clono el DIV no me funciona el añadir nuevo usuario, pero si quito la tabla y dejo todos los inputs y selects uno detrás de otro SI funciona perfectamente. Por ello creo que el problema está en que al meter la table trs y tds el acceso a los hijos cambia , ¿es por esto?.

Gracias de antemano

Dany_s · #4 (**permalink**) 17/12/2010, 07:56

clona solo el tr y agregalo a la tabla, no hace falta id dinámicos

Código HTML:

Ver original<html>
    <head>
        <title>Ejemplo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>
        <script type="text/javascript">
            $( function (){
                $('#agregar').click( function(){
                    newTr = $('tr:first').clone();
                    $('input', newTr).val('');
                    $('#laTabla').append(newTr);
                    return false;
                });
            });
        </script>
    <body>
 
    <div>
        <table id="laTabla">
            <tr>
                <td><span class="item">Name</span></td>
                <td><input  type="text"  name="nombre[]" /></td>
            </tr>
        </table>
        <input id="agregar" type="button" value="+" />
    </div>
 
    </body>
</html>

con ese ejemplo podés agregar los td con imput que quieras y tiene que funcionar

Dundee · #5 (**permalink**) 17/12/2010, 09:47

Cita:

Iniciado por Dany_s

clona solo el tr y agregalo a la tabla, no hace falta id dinámicos

Gracias por el ejemplo, me ha servido de mucho y casi lo tengo.
Solamente me falta conseguir que cada botón tenga una id distinta.

Código:

function addField(){
var clickID = $(this).attr('id').replace('fila_','');
// Genero el nuevo numero id
var newID = (clickID+1);

newTr = $('#inquilinos tr:first').clone();

$('input', newTr).eq(0).val('');
$('input', newTr).eq(1).val('');

$('select', newTr).eq(0).val('');
$('select', newTr).eq(1).val('');
$('select', newTr).eq(2).val('');

$('#inquilinos').append(newTr);

//nuevo id para nuevo botón ESTO ES NECESARIO sino el evento siempre se va a //referir al mismo botón cuya id es fila_1
newTr.children("input").eq(2).attr("id","fila_"+newID);


//Cambio el signo "+" por el signo "-" y le quito el evento addfield
$("#"+clickID).val('Eliminar').unbind("click",addField);

//Ahora le asigno el evento delRow para que borre la fial en caso de hacer click
$("#"+clickID).bind("click",delRow);	
	
}

Lo hago así :
//nuevo id para nuevo botón ESTO ES NECESARIO sino el evento siempre se va a //referir al mismo botón cuya id es fila_1
newTr.children("input").eq(2).attr("id","fila_"+ne wID);

Pero no me funciona

Gracias por la ayuda

Dany_s · #6 (**permalink**) 17/12/2010, 11:06

que no sirven los id dinámicos!!! jeje deberias practicar un poco con estos métodos http://api.jquery.com/category/traversing/ y ver que hacen

si tenes un boton para borrar en cada fila entonce cuando hacen click subis hasta ese tr y lo borras

Código HTML:

Ver original<html>
    <head>
        <title>Ejemplo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>
        <script type="text/javascript">
            $( function (){
                $('#agregar').click( function(){
                    newTr = $('tr:first').clone();
                    $('input, select', newTr).val('');
                    $('#laTabla').append(newTr);
                    return false;
                });
 
                $('.eliminar').live('click', function(){
                    $(this).closest('tr').remove();
                });
 
            });
        </script>
    <body>
 
    <div>
        <table id="laTabla">
            <tr>
                <td><span class="item">Name</span></td>
                <td><input  type="text"  name="nombre[]" /></td>
                <td><input  type="text"  name="uno[]" /></td>
                <td><input  type="text"  name="dos[]" /></td>
                <td><select name="tres"><option>1</option><option>2</option</select></td>
                <td><select name="cuatro"><option>1</option><option>2</option</select></td>
                <td><select name="cinco"><option>1</option><option>2</option</select></td>
                <td><button class="eliminar">Eliminar</button></td>
            </tr>
        </table>
        <input id="agregar" type="button" value="+" />
    </div>
 
    </body>
</html>

y esto
$('select', newTr).eq(0).val('');
$('select', newTr).eq(1).val('');
$('select', newTr).eq(2).val('');

es lo mismo que esto
$('select', newTr).val('');

y todo junto
$('input', newTr).eq(0).val('');
$('input', newTr).eq(1).val('');

$('select', newTr).eq(0).val('');
$('select', newTr).eq(1).val('');
$('select', newTr).eq(2).val('');

es lo mismo esto
$('select, input', newTr).val('');

Dundee · #7 (**permalink**) 17/12/2010, 11:28

Cita:

Iniciado por Dany_s

si tenes un boton para borrar en cada fila entonce cuando hacen click subis hasta ese tr y lo borras

Antes de nada rezonozco que soy bastante nuevo con Jquery, soy programador PHP y no trabajo habitualmente con FW o lenguajes del lado del cliente por eso me falta mucha sintaxis.
Pero según tu ejemplo existen dos botones:
1 <td><button class="eliminar">Eliminar</button></td> para eliminar
2 <input id="agregar" type="button" value="+" /> para añadir

El problema es que yo tengo uno solo que inicialmente su value es "Añadir" y cuando pinchas y se crea la nueva fila se cambia a eliminar y así sucesivamente.

Lo que sigo sin conseguir hacer (igual se podría hacer sin el paso que yo quiero dar ) es que cada botón tenga una id distinta , es decir agregar1, agregar2 etc etc .

¿Por cierto que función tiene el return false del ejemplo que me has mostrado?.

Lo que mas me preocupa (por llamarlo de algún modo) es porque así:
newTr.children("input").eq(2).attr("id","fila_"+ne wID);

no me crear una id distinta en cada botón cuyas ids tendrían que ser fila_1, fila_2 etc etc .

Gracias por la ayuda

Dany_s · #8 (**permalink**) 17/12/2010, 14:30

otra forma creo que es más sencilla, creo un string del tr asi tengo todos los campos tal cual lo dejo por defecto y no hay que limpiarlos, cuando doy click en el botón con #agregar agrego la clase eliminar y borro el id, luego agrego la nueva fila

Código HTML:

Ver original<html>
    <head>
        <title>Ejemplo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>
        <script type="text/javascript">
            $( function (){
                
                newTr = '<tr>'+$('#laTabla tr').clone().html()+'</tr>';
                $('#agregar').live('click', function(){
                    $(this).text("Eliminar").addClass('eliminar').removeAttr('id');
                    $('#laTabla').append(newTr);
                    return false;
                });
 
                $('.eliminar').live('click', function(){
                    $(this).closest('tr').remove();
                    return false;
                });
 
            });
        </script>
    <body>
 
    <div>
        <table id="laTabla">
            <tr>
                <td><span class="item">Name</span></td>
                <td><input  type="text"  name="nombre[]" /></td>
                <td><input  type="text"  name="uno[]" /></td>
                <td><input  type="text"  name="dos[]" /></td>
                <td><select name="tres"><option>1</option><option>2</option</select></td>
                <td><select name="cuatro"><option>1</option><option>2</option</select></td>
                <td><select name="cinco"><option>1</option><option>2</option</select></td>
                <td><button id="agregar">Agregar</button></td>
            </tr>
        </table>
    </div>
 
    </body>
</html>

Dundee · #9 (**permalink**) 18/12/2010, 04:55

Cita:

Iniciado por Dany_s

otra forma creo que es más sencilla, creo un string del tr asi tengo todos los campos tal cual lo dejo por defecto y no hay que limpiarlos, cuando doy click en el botón con #agregar agrego la clase eliminar y borro el id, luego agrego la nueva fila

Mil gracias , esto me sirve para ver la pontencialidad que tiene Jquery y para comprender un poco mejor el código.
A continuación dejaré una lista de links relacionados con tus ejemplos que le pueden servir a otros internautas que lleguen a este post.

Método live

closest(selector)
Viene a decir que selecciona el primer elemento (tomando como punto de partida el que ejecuta el evento ) cuyo selector sea el que le hemos definido en closest(selector) y con ello luego podemos hacer cosas , como en el ejemplo borrar el fila $(this).closest('tr').remove();

Plugin vanadiumJS para validar los elementos del formulario (parece muy interesante pero quizás el de abajo sea mejor)

Validity

Si hay algún fallo por favor Dany_s no dudes en correjirme.

Mil gracias de nuevo

Dundee · #10 (**permalink**) 21/12/2010, 05:45

Cita:

Iniciado por Dany_s

otra forma creo que es más sencilla, creo un string del tr asi tengo todos los campos tal cual lo dejo por defecto y no hay que limpiarlos, cuando doy click en el botón con #agregar agrego la clase eliminar y borro el id, luego agrego la nueva fila

Compañero , he seguido tu consejo y he quitado las ids de los inputs ; el problema que tengo ahora es que no se como validar los datos cada vez que meto un dato en un input , he probado a hacer así dentro de la función live , pero no funciona.
Por ejm
if (nombre=$("nombre").value)
alert(nombre);

El tema es saber llegar al primer,segundo, tercero etc etc.. input del tr en cuestión , porque al tener varios tr no tengo ni idea como hacer esto.
¿Alguna idea?.

Mil gracias de antemano

Y felices fiestas a tod@s

Dany_s · #11 (**permalink**) 21/12/2010, 07:29

ponele clases a tus inputs
en tu evento haces referencia a tu elemento con
$(this)
entonces te moves hasta el tr con closest
$(this).closest('tr')
y ahi busca tu input
if ($(this).closest('tr').find('.claseInput').val() == '')
alert('vacio');

y si no es para una fila específica sino para todos es más simple
$('selectorContendor').find('claseInput')

Dundee · #12 (**permalink**) 21/12/2010, 08:44

Cita:

Iniciado por Dany_s

ponele clases a tus inputs
en tu evento haces referencia a tu elemento con
$(this)
entonces te moves hasta el tr con closest
$(this).closest('tr')
y ahi busca tu input
if ($(this).closest('tr').find('.claseInput').val() == '')
alert('vacio');

y si no es para una fila específica sino para todos es más simple
$('selectorContendor').find('claseInput')

Gracias compañero , casi lo tengo pero me da un pequeño error:

Código:

$('#agregar').live('click', function(){
			
						
			if ($(this).closest('tr').find('.name').val() == '')
				alert('Por favor inserte un nombre');
			
			else if ($(this).closest('tr').find('.vat').val() == '')
				alert('Por favor inserte un dni correcto');	
				
			else if ($(this).closest('tr').find('.day').val() == '0')
				alert('Por favor inserte un dia correcto');
				
			else if ($(this).closest('tr').find('.month').val() == '0')
				alert('Por favor inserte un mes correcto');
				
			else if ($(this).closest('tr').find('.year').val() == '0')
				alert('Por favor inserte un año correcto');			
			
			else { /* Si ha validado correctamente entonces.. */ newTr = '<tr>'+$('#tabla tr').clone().html()+'</tr>'; 
<!-- clonamos el html de la fila -->		    
/*  Cambiamos el texto "agregar" por "eliminar", y eliminamos la id  
 	live hace que el evento se ejecute con todas las clases eliminar, las ya creadas o las por crear */

                    $(this).text("Eliminar").addClass('eliminar').removeAttr('id'); 
                    $('#inquilinos').append(newTr); <!-- añadimos a continuación la siguiente fila clonada -->
                    return false;
			} /* cierro el else */
				
   				});

El problema que tengo es que si lo hago de este modo , cuando un dato está mal sale el alert correspondiente, pero desaparecen todas las filas que ya había insertado, y esto es un problema, ya que lo suyo es que las filas ya insertadas no se borren , y simplemente no deje insertar una nueva hasta que no estén los datos correctamente validados.

Mil gracias por tu ayuda.

Dany_s · #13 (**permalink**) 21/12/2010, 09:02

el return false está en el else tiene que estar siempre al final de la función

podés guardarte la fila en una variable

fila = $(this).closest('tr');

asi después usas fila.find('.clase')

Dundee · #14 (**permalink**) 23/12/2010, 05:07

Cita:

Iniciado por Dany_s

el return false está en el else tiene que estar siempre al final de la función

podés guardarte la fila en una variable

fila = $(this).closest('tr');

asi después usas fila.find('.clase')

Gracias Dani_s tu ayuda me ha servido mucho; pero todavía hay algo que no me funciona y no consigo resolver (ya se que tengo que ponerme las pilas con Jquery (:: ) y son dos temas:

1 El que más me preocupa es que cuando pulso en agregar en la primera fila tras validar los datos, me crea la segunda fila perfectamente y cambiar a el botón agregar de la primera el value que ahora pasa a valer value="eliminar" y le borra la ID , con la segunda hace lo mismo, pero con la tercera cuando se crea también se le borra la id y se pone el texto eliminar (como en la 1 y 2), pero debería de poner agregar y haberle asignado una id de forma dinámica.

2 En Iexplorer (dichoso explorer ¡¡¡ ) se clonan las filas y sus datos (lo suyo es que se borren), en Mozilla va perfecto esto último (lo anterior sucede el los dos navegadores).

El código siguiendo tus consejos de eliminar las ids lo tengo así:

Código:

$('#agregar').live('click', function(){
			
						
			if ($(this).closest('tr').find('.name').val() == '')
				alert('Por favor inserte un name');
			
			else if ($(this).closest('tr').find('.vat').val() == '')
				alert('Por favor inserte un vat correcto');	
				
			else if ($(this).closest('tr').find('.day').val() == '0')
				alert('Por favor inserte un dia correcto');
				
			else if ($(this).closest('tr').find('.month').val() == '0')
				alert('Por favor inserte un mes correcto');
				
			else if ($(this).closest('tr').find('.year').val() == '0')
				alert('Por favor inserte un año correcto');			
			
			else { 
	        newTr = '<tr>'+$('#tabla tr').clone().html()+'</tr>'; 

				    	$('select, input', newTr).val(''); 
				

                    $(this).text("Eliminar").addClass('eliminar').removeAttr('id'); 
                    $('#tabla').append(newTr); 
			}
				return false;
   				});

En realidad hay otra cosa que me produce confusión , ¿el return false exactamente que funciona tiene ahí?, ¿porque necesito que devuelva falso la función?.

Mil gracias por tu ayuda

Dany_s · #15 (**permalink**) 23/12/2010, 06:01

fijate que en el evento clono la fila fuera del evento click de agregar y vos lo pusiste adentro
newTr = '<tr>'+$('#tabla tr').clone().html()+'</tr>';
podes sacarle el clone() y dejarlo asi
newTr = '<tr>'+$('#tabla tr').html()+'</tr>';
pero dejalo afuera, la idea es que cree el string cuando se carga la página cuando los campos esten vacios y una única vez

Cita:

con la segunda hace lo mismo, pero con la tercera cuando se crea también se le borra la id y se pone el texto eliminar (como en la 1 y 2), pero debería de poner agregar y haberle asignado una id de forma dinámica.

no entendi y no se necesita id, para el botón eliminar le agrego la clase .eliminar

Dundee · #16 (**permalink**) 23/12/2010, 06:14

Cita:

Iniciado por Dany_s

fijate que en el evento clono la fila fuera del evento click de agregar y vos lo pusiste adentro
newTr = '<tr>'+$('#tabla tr').clone().html()+'</tr>';
podes sacarle el clone() y dejarlo asi
newTr = '<tr>'+$('#tabla tr').html()+'</tr>';
pero dejalo afuera, la idea es que cree el string cuando se carga la página cuando los campos esten vacios y una única vez

no entendi y no se necesita id, para el botón eliminar le agrego la clase .eliminar

Gracias de nuevo Dany_s , ya me funciona, por cierto ¿me puedes recomendar un buen curso o tutorial de Jquery que abarque desde 0 hasta conceptos avanzados?.
Me he dado cuenta que cada vez me va a hacer más falta tener que usar Jquery para aplicaciones del lado del cliente, y no parece excesivamente complicado, aunque como todo necesita un aprendizaje.

Para terminar si no he entendido mal , creo entenderte que newTr = '<tr>'+$('#tabla tr').html()+'</tr>'; tiene que estar fuera del evento $('#agregar').live('click', function(){ para que cada vez que cargue la página se genere la "copia" de la fila ¿no?. Es decir que solo se carga la página una vez, con lo que la copia de la fila estará siempre disponible (vacía) mientras no salgamos de esta página, ¿cierto?.

Gracias de nuevo por tu ayuda.

Felices fiestas.

Dany_s · #17 (**permalink**) 23/12/2010, 07:27

Si, esa es la idea jeje

tenes un curso en videotutorial aca http://illasaron.com/
y otro acá http://fdoyanes.blogspot.com/search/...oriales-Jquery
otro http://www.desarrolloweb.com/manuale...al-jquery.html

después tenés
http://www.javascriptya.com.ar/jquery/
http://www.desarrolloweb.com/manuale...al-jquery.html

y la documantación que por más que no sepas inglés muestran ejemplos sencillos y te das cuenta que hace cada método
http://docs.jquery.com/Main_Page
si te recorres y practicas cada selector con los ejemplos de la doc a la larga te vas a ahorrar mucho tiempo y los métodos de manipulación del dom y recorrido también, bueno en realidad todos pero según lo que veo todos empiezan a querer usar ajax, animaciones y plugins que para mi habría que dejar para lo último

Saludos

Dundee · #18 (**permalink**) 23/12/2010, 09:14

Cita:

Iniciado por Dany_s

Si, esa es la idea jeje

tenes un curso en videotutorial aca http://illasaron.com/
y otro acá http://fdoyanes.blogspot.com/search/...oriales-Jquery
otro http://www.desarrolloweb.com/manuale...al-jquery.html

después tenés
http://www.javascriptya.com.ar/jquery/
http://www.desarrolloweb.com/manuale...al-jquery.html

y la documantación que por más que no sepas inglés muestran ejemplos sencillos y te das cuenta que hace cada método
http://docs.jquery.com/Main_Page
si te recorres y practicas cada selector con los ejemplos de la doc a la larga te vas a ahorrar mucho tiempo y los métodos de manipulación del dom y recorrido también, bueno en realidad todos pero según lo que veo todos empiezan a querer usar ajax, animaciones y plugins que para mi habría que dejar para lo último

Saludos

La primera página que comentas "iilasaron.com" del gran maestro Jesús Conde debo confesar que soy fan número 1 , recuerdo que hace tiempo ví que Outkast había creado un curso de Jquery pero no tuve tiempo de seguirlo, creo que ahora es el momento.

Mil gracias de nuevo y
Felices fiestas

Dany_s · #19 (**permalink**) 23/12/2010, 09:22

a mi también me ayudó mucho illasaron

hay un libro en español que se llama aprende jquery 1.3

Dundee · #20 (**permalink**) 23/12/2010, 09:32

Cita:

Iniciado por Dany_s

a mi también me ayudó mucho illasaron

hay un libro en español que se llama aprende jquery 1.3

Si , yo lo tengo en inglés , pero me ha faltado tiempo para profundizar, creo que es el mismo , este se llama "JquerLearning y 1.3".

Mil gracias