JQuery cambiar texto a entrada
Pregunta
Tengo una configuración de tabla como la siguiente:
<table>
<tr>
<td class="url">
<a href="http://www.domainname.com/page1.html" />
</td>
</tr>
<tr>
<td class="url">
<a href="http://www.domainname.com/page2.html" />
</td>
</tr>
<tr>
<td class="url">
<a href="http://www.domainname.com/page3.html" />
</td>
</tr>
</table>
Básicamente, quiero que el ancla cambie a un cuadro de texto que contiene el href cuando se haga clic en el enlace, a continuación se muestran los resultados de ejemplo:
<table>
<tr>
<td class="url">
<input type="text" value="http://www.domainname.com/page1.html" />
</td>
</tr>
<tr>
<td class="url">
<a href="http://www.domainname.com/page2.html" />
</td>
</tr>
<tr>
<td class="url">
<a href="http://www.domainname.com/page3.html" />
</td>
</tr>
</table>
Cuando se hace clic en otra etiqueta de anclaje o el cuadro de texto no está enfocado, cualquier cuadro de texto vuelve a ser un ancla y el clic sobre el que se cambia a un cuadro de texto.
Solución
Esto es un comienzo. Agregue un evento de clic a los enlaces y un evento de desenfoque a las entradas usando live ()
.
$(function() {
$("td.url a").live("click", function() {
var parent = $(this).parent();
$(this).replaceWith("<input type='text' value='" + $(this).attr("href") + "'>"); //closing angle bracket added
parent.children(":text").focus();
return false;
});
$("td.url :text").live("blur", function() {
$(this).replaceWith("<a href='" + $(this).val() + "'>");
});
});
Dicho esto, para este tipo de cosas prefiero no eliminar elementos del DOM como este. En su lugar, prefiero simplemente ocultar / mostrar elementos según corresponda. Por ejemplo:
<table>
<tr>
<td class="url">
<a href="http://www.domainname.com/page1.html" />
<input type="text">
</td>
</tr>
</table>
con:
td.url input { display: none; }
td.edit a { display: none; }
td.edit input { display: block; }
y
$(function() {
$("td.url a").click(function() {
var a = $(this);
a.next().val(a.attr("href")).focus();
a.parent().addClass("edit");
return false;
});
$("td.url :text").blur(function() {
var txt = $(this);
txt.prev().attr("href", txt.val());
txt.parent().removeClass("edit");
});
});
Otros consejos
$(".url").click(function()
{
var link = $(this).find("a");
link.hide();
$(this).append("<input id'txtUrl' value" + link.attr("href") + " />");
});
Algo como:
$("td.url a").bind("click", function(){
var clickevent = arguments.callee;
$("td.url input").trigger("blur");
$(this).replaceWith("<input type='text' value='"+$(this).attr("href")+"'/>");
$("td.url input").bind("blur", function(){
$(this).replaceWith("<a href='"+$(this).val()+"' />");
$("td.url a").bind("click", clickevent);
});
});
totalmente no probado, por supuesto