JQuery的變化文本輸入

Question

我有一個表的設置如下圖所示：

<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> 

我基本上要錨更改爲一個文本框包含的HREF當鏈接點擊，下面是示例結果：

<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> 

當另一個錨點標記被點擊或者文本框沒有聚焦時，任何文本框都會返回爲錨點，點擊的文本框會變爲文本框。

Answer 1

這是一個開始。使用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() + "'>"); 
    }); 
}); 

這就是說，對於這種事情，我不想從這樣的DOM中刪除元素。相反，我更喜歡根據需要隱藏/顯示元素。例如：

<table> 
    <tr> 
    <td class="url"> 
     <a href="http://www.domainname.com/page1.html" /> 
     <input type="text"> 
    </td> 
    </tr> 
</table> 

與：

td.url input { display: none; } 
td.edit a { display: none; } 
td.edit input { display: block; } 

和

$(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"); 
    }); 
}); 

Answer 2

$(".url").click(function() 
{ 
var link = $(this).find("a"); 
link.hide(); 
$(this).append("<input id'txtUrl' value" + link.attr("href") + " />"); 
}); 

Answer 3

是這樣的：

$("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); 
    }); 
}); 

完全未經測試，當然