代碼並不重要,關鍵是思路,這裏簡要說一下:javascript
1.展現的時候直接將內容展現在文本框中,文本框的邊框設置爲0,也能夠在設置一下readonly,這樣在展現到頁面上的時候給人一種普通文本的假象, 實際是顯示在邊框爲0的文本框中,給文本框加單擊或者雙擊事件,觸發時將邊框更改成1,而且去掉readonly屬性,這樣就能夠修改了,同時也要有失去 焦點事件,失去焦點時經過ajax將相應的數據發送到服務器端進行修改,修改爲功文本框恢復原狀。這種方式給用戶一種假象,有時體驗不太好,好比設置雙擊 觸發事件,而單擊時就會出現光標(雖然有readonly不能改)。下面再說一種方式。html
2.展現的時候內容直接展現在一些容器類標籤中例如<span>標籤,單擊或雙擊時一樣觸發事件,將內容更改成文本框,而且將 是原來容器中的內容做爲文本框中的value,設置失去焦點事件,當失去焦點時觸發事件經過ajax實現修改,而且再將文本框的位置替換爲修改後的內容, 固然還有一些細節,好比沒有作任何修改的狀況下失去焦點,這樣就不該該發送數據到服務器端了。給出代碼以下:java
<!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>ajax