代碼並不重要，關鍵是思路，這里簡要說一下：
1.展示的時候直接將內容展示在文本框中，文本框的邊框設置為0，也可以在設置一下readonly，這樣在展示到頁面上的時候給人一種普通文本的假象， 實際是顯示在邊框為0的文本框中，給文本框加單擊或者雙擊事件，觸發時將邊框更改為1，並且去掉readonly屬性，這樣就可以修改了，同時也要有失去 焦點事件，失去焦點時通過ajax將相應的數據發送到服務器端進行修改，修改成功文本框恢復原狀。這種方式給用戶一種假象，有時體驗不太好，比如設置雙擊 觸發事件，而單擊時就會出現光標（雖然有readonly不能改）。下面再說一種方式。
2.展示的時候內容直接展示在一些容器類標簽中例如<span>標簽，單擊或雙擊時同樣觸發事件，將內容更改為文本框，並且將 是原來容器中的內容作為文本框中的value，設置失去焦點事件，當失去焦點時觸發事件通過ajax實現修改，並且再將文本框的位置替換為修改后的內容， 當然還有一些細節，比如沒有做任何修改的情況下失去焦點，這樣就不應該發送數據到服務器端了。給出代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>(單擊)雙擊直接修改內容的代碼</title>
<script type="text/javascript">
function edit(element){
var oldhtml = element.innerHTML;//獲得元素之前的內容
var newobj = document.createElement('input');//創建一個input元素
newobj.type = 'text';//為newobj元素添加類型
newobj.value=oldhtml;
element.innerHTML = ''; //設置元素內容為空
element.appendChild(newobj);//添加子元素
newobj.focus();//獲得焦點
//設置newobj失去焦點的事件
newobj.onblur = function(){
//下面應該判斷是否做了修改並使用ajax代碼請求服務端將id與修改后的數據提交
alert(element.id);
//當觸發時判斷newobj的值是否為空，為空則不修改，並返回oldhtml
element.innerHTML = this.value ? this.value : oldhtml;
}
}
</script>
</head>
<body>
姓名:<span id="1" ondblclick="edit(this)">張三</span><br/>
家庭住址:<span id="2" ondblclick="edit(this)">張三</span><br/>
</body>
</html>