So with this:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> Untitled documents </title> <script type=" Text/javascript ">//JavaScript document VA R deditor= (function () {//private methods function addevent (Elem,type,handler) {if (!+ "\v1") {//ie elem[type+handler.to String ()]=handler; Elem.attachevent ("On" +type,function () {elem[type+handler.tostring ()] ();}); else Elem.addeventlistener (type,handler,false); }//compatible Event binding function Fixevent (e) {e.preventdefault=function () {return this.returnvalue=false;}; E.stoppropagation=function () {return this.cancelbubble=true;}; return e; }//event compatible 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}; }//text edit box 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 (); }); }//Event Add function Filetocontext () {currentelem.removechild (HTML); Currentelem.innerhtml=currentcontext; Currentcontext=null; currentelem=Null }//Edit the text 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"; }//Text editor function save () {var value=elemitems["textfile"].value; if (Request ("POST", Url,value)) Currentelem.innerhtml=value; Filetocontext (); }//Save result function cancel () {Filetocontext (); }//discards the Save 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 style var url;//ajax request Var Currentelem; var elems=[]; var elemitems={}; Public return function (ELEMS_ARG,SAVEURL,LINKHREF) {//Set initial parameter Url=saveurl; if (linkhref) addlinkcss (LINKHREF); if (elems_Arg && elems_arg.constructor==array&& elements.length>0) {elems=elems_arg; Createeditorfile (); Addevents (); }//Add elements and events 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); };//add Common Method}; }//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> </pead> <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> name </td><td>progresstudy</td></tr > <tr><td> Age </td><td>22</td></tr> <tr><td> Career </TD><TD > Students </td></tr> </table> </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
This is written in a Java-like manner, with private methods, private properties, and public methods (previously preferred methods).
This is a similar form:
Copy Code code as follows:
var deditor= (function () {
Private method
Private prototype
return function () {
Public method
};
})();
I first wrote down the general framework:
Copy Code code as follows:
var deditor= (function () {
Private method
function addevent () {}//Add Event
function Fixevent () {}//compatible event object
function Addlinkcss () {}//Add an outer style
function Createeditorfile () {}//Create the necessary HTML
function addevents () {}//bind event for newly created element
function Filetocontext () {}//edit goto text
function Contexttofile () {}//text to edit
function Save () {}//Save
function Cancel () {}//Discard
Private prototype
var currentcontext;//current Edit content
var html;//the newly created HTML object
var url;//ajax request, saving content
var currentelem;//current Element
var elems=[];//all elements that can be edited in place
var elemitems={};//all newly created nodes
return function () {
Public method
This.theneffect () {}//Set all elements that can be edited in place
This.seturl () {}//Set URL value
This.setcsshref () {}//set href for external CSS
}
})();
The rest of the work is to achieve all the methods, and improve it.
Maybe it's for my first serious study of the language is Java, all this form of writing style so that I from the beginning to the end of thinking clearly, to this successful completion of
The next debugging process encountered two problems, here it is necessary to say, in future programming may encounter
One is caused by the bubbling of events:
The editable fields are automatically hidden when you click the text box, or button, because the parent node captures the mouse click event and executes the Filetocontext () function
The second is that using innerHTML to purge content under IE, the target node is removed from memory, but it also displays this as the node node object if you detect it with alert (HTML).
All it's best to use Removenode to remove nodes if you plan to use them later.
The ' in-place edit ' is basically done (and AJAX support is needed), but there's a problem that can't be inherited (anyway, I haven't thought of a way to inherit it yet), and there was really no language at the time. There are limitations to this approach.
To sum up: Be sure to plan carefully before coding, to determine exactly which one/several patterns to use, or whether to use the pattern.
Finally: If there is anything wrong with what I have written or if there is any suggestion please correct me, this is the purpose of my blog.
