EDITAR un elemento del DOM con JQUERY

pelusete · #1 (**permalink**) 21/07/2008, 23:28

Hola foreros, necesito su ayuda, he tratado de implementar una pagina en la cual hago click en un elemento de ésta, sobre el cual se quiere editar...

Ejemplo: en la pagina hay un TD que tiene ID=1, cuando clikeo un ID=1 reemplaza ese elemento por un input, donde uno escribe la nueva palabra y al pulsar ENTER o algo, esta nueva palabra se coloque en el contenido previo del DOM cliqueado.

¿Me entendi bien?

Creo que estoy a punto de solucionarlo, pero me he enrredado mucho, espero poder recibir una grata orientacion de parte de ustedes o algunos ejemplos que me indique mi error o ejemplos explicativos de lo que se quiere.

Les envio mi code (lo que he tratado de hacer)

Cita:

<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="jquery126.js"></script>

<script type="text/javascript">
$(document).ready(function(){

//click en el elemento que se quiere editar
$('#3').click( function()
{
//$(this).text("Con .txt() He escrito un texto sobre el elemento existente");
//$(this).html("Con .html(), he echo lo mismo que con .txt()");
$(this).append("Este texto esta al FINAL del #3");
$(this).prepend("Este texto esta al INICIO del #3");
});

//click en el elemento que se quiere editar
$('#1').click( function()
{
$(this).html("<input type=text name=variable size=10><input type=button id=editar value=editar>");
$("#editar").click(function(){ $("#1").html(variable); });
});
});
</script>

</head>
<body>

<table class="holder" border="1">
<tbody>
<tr>
<td id="1">Uno</td>
<td id="2">Dos</td>
<td id="3">ELEMENTO CLIKEADO</td>
<td id="4">Cuatro</td>
<td id="5">Cinco</td>
</tr>
</tbody>
</table>
</body>
</html>

He tratado de buscar ejemplos por la net, pero hay unos ejemplos con ajax, pero no se nada de ello :(, kisiera que me ayudasen a solucionarlo mediante JQUERY.

Cualquier sugerencia sera bien recibida! ^^

marcopoloaz06 · #2 (**permalink**) 21/07/2008, 23:52

hola,
ps por ahi estabas

Código HTML:

$('#1').click( function()
{
$(this).html("<input type='text' name='variable' size='10'><input type='button' id='editar' value='editar'>");
$("input[name='variable']").focus();
$("#editar").click(function(){ $("#1").html( $("input[name='variable']").val()  ); });
});
});

saludos
:]

pelusete · #3 (**permalink**) 22/07/2008, 10:09

gracias por responder!
pero he probado tu code....pero cuando le doy click en editar no me pasa la variable NOM al antiguo contenido del DOM clikeado :S

Bueno seguire intentando a ver si me resulta! ^^