於是有了這個：
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <script type="text/javascript"> // JavaScript Document var Deditor=( function(){ //private methods function addEvent(elem,type,handler){ if(!+"\v1"){//IE elem[type+handler.toString()]=handler; elem.attachEvent("on"+type,function(){ elem[type+handler.toString()](); });} else elem.addEventListener(type,handler,false); }//相容事件綁定 function fixEvent(e){ e.preventDefault=function(){return this.returnValue=false;}; e.stopPropagation=function(){return this.cancelBubble=true;}; return e; }//event相容 function createEditorFile(){ var span=document.createElement("span"); span.id="directEditorSpan"; var textFile=document.createElement("input"); textFile.type="text"; textFile.id="directEditorTextFile"; var okButton=document.createElement("input"); okButton.type="button"; okButton.value="save"; okButton.id="directEditorOkButton"; var cancelButton=document.createElement("input"); cancelButton.type="button"; cancelButton.value="cancel"; cancelButton.id="directEditorCancelButton"; span.appendChild(textFile); span.appendChild(okButton); span.appendChild(cancelButton); html=span; elemItems={span:span,textFile:textFile,okButton:okButton,cancelButton:cancelButton}; }// 文本編輯框 function addEvents(){ for(var i=0;i<elems.length;i++){ addEvent(elems[i],"click",contextToFile); } var items=elemItems; addEvent(items.okButton,"click",save); addEvent(items.cancelButton,"click",cancel); addEvent(html,"click",function(evt){ evt=evt || window.event; if(!+"\v1") evt=fixEvent(evt); evt.stopPropagation(); }); }//事件添加 function fileToContext(){ currentElem.removeChild(html); currentElem.innerHTML=currentContext; currentContext=null; currentElem=null; }//編輯轉文本 function contextToFile(evt){ if(currentElem) fileToContext(); evt=evt || window.event; currentElem=evt.srcElement || evt.target; currentContext=currentElem.innerHTML; elemItems["textFile"].value=currentContext; currentElem.innerHTML=""; currentElem.appendChild(html); html.style.display="block"; }//文本轉編輯 function save(){ var value=elemItems["textFile"].value; if(request("post",url,value)) currentElem.innerHTML=value; fileToContext(); }//儲存結果 function cancel(){ fileToContext(); }//放棄儲存 function addLinkCss(cssHref){ var link=document.createElement("link"); link.href=cssHref; link.type="text/css"; link.rel="stylesheet"; document.getElementsByTagName("head")[0].appendChild(link); } //private arguments var currentContext; var html; //var cssHref;//css樣式 var url;//AJAX請求 var currentElem; var elems=[]; var elemItems={}; //public return function(elems_arg,saveUrl,linkHref){ //設定初始參數 url=saveUrl; if(linkHref) addLinkCss(linkHref); if(elems_arg && elems_arg.constructor==Array&& elements.length>0) { elems=elems_arg; createEditorFile(); addEvents(); } //添加元素和事件 this.thenEffect=function(elements){ if(elements.constructor==Array && elements.length>0) {elems=elements; createEditorFile(); addEvents();} }; this.setUrl=function(u){ url=u; }; this.setCssHref=function(href){ addLinkCss(href); };//添加公用方法 }; }//ann function end )(); window.onload=function(){ var tds=document.getElementsByTagName("td"); var editors=[]; for(var i=0;i<tds.length; i++){ if((i+1)%2==0) editors.push(tds[i]); } var deditor=new Deditor(); deditor.thenEffect(editors); } </script> </head> <body> <style type="text/css"> #directEditorSpan input{ border:1px solid #ccc; background-color:#fff; color:#696969; float:left;} #info{ border-collapse:collapse; } #info td { border:1px solid #ccc; text-align:left; padding-left:10px; line-height:20px; width:100px; font-size:12px; } </style> <table id="info"> <tr><td>姓名</td><td>progresstudy</td></tr> <tr><td>年齡</td><td>22</td></tr> <tr><td>職業</td><td>學生</td></tr> </table> </script> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
這個是用類似Java的方式寫的，有私人方法，私人屬性，公有方法(以前最喜歡用的方法)。
也就是這種類似的形式：
複製代碼 代碼如下:
var Deditor=(function(){
//private method
//private prototype
return function(){
//public method
};
})();
我先是把大體的架構寫出來：
複製代碼 代碼如下:
var Deditor=(function(){
//private method
function addEvent(){}//添加事件
function fixEvent(){}//相容event對象
function addLinkCss(){}//添加外聯樣式
function createEditorFile(){}//建立必要的HTML
function addEvents(){}//為新建立元素繫結事件
function fileToContext(){}//編輯轉文本
function contextToFile(){}//文本轉編輯
function save(){}//儲存
function cancel(){}//放棄
//private prototype
var currentContext;//當前編輯內容
var html;//新建立的html對象
var url;//AJAX請求，儲存內容
var currentElem;//當前所在元素
var elems=[];//所有可就地編輯的元素
var elemItems={};//所有新建立的節點
return function(){
//public method
this.thenEffect(){}//設定所有可就地編輯的元素
this.setUrl(){}//設定url值
this.setCssHref(){}//設定外聯css的href
}
})();
剩下的工作就是把所有的方法給實現了，並完善它。
也許是應為我第一個認真學習的語言是java，所有這種形式的編寫風格使我由始至終思路清晰，到此順利完成了
接下來調試的過程中遇到了兩個問題，在這裡有必要說一下，在以後的編程中可能會遇到
一個是事件的冒泡引起的：
當點擊文字框，或按鈕時可編輯域自動隱藏了，原因是父節點捕獲了滑鼠點擊事件，並執行了fileToContext()函數
第二個是，在IE下用innerHTML來清除內容，會把子節點從記憶體中徹底移除，但如果你用alert(html)檢測時，它還會顯示此為node節點對象。
所有最好用removeNode來移除節點，如果你打算以後還用的話。
至此'就地編輯'基本完成了(還需要AJAX支援才行)，但遇到了一個問題，不能繼承(反正到目前我還沒想到一個繼承的方法)，當時實在有些無語。這種方法的確有局限性。
總結一下：編碼前一定要好好規劃一下，明確到底要使用那一個/幾個模式，或確定要不要使用模式。
最後：如果我所寫的有任何不對的地方或有任何建議請指正出來，這也是我寫博文的目的。
