<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" > <ptml> <pead> & Lt;meta http-equiv= "Content-type" content= "text/html; Charset=iso-8859-1 "> <title> click Edit Current Content </title> <script type=" Text/javascript "> Var editfield={co Nfigure:function (ID) {this.id=id; This.createelements (); Dynamically generate Edit Input box This.toscan (); Initializes dynamically generated input boxes and buttons, display properties for the DOM element to be edited this.addevents (); Adds an event listener to the relevant DOM element, Events:function (ELEM,TYPE,FN) {//Common function for adding events if (elem.attachevent) {elem.attachevent ("on" +type , FN); }else if (elem.addeventlistener) {Elem.addeventlistener (type,fn,false); }else{elem["on" +TYPE]=FN; return elem; }, Addevents:function () {//Add event var That=this; This.events (This.btnsubmit, "click", Function () {that.save (); }); This.events (This.btncancel, "click", Function () {that.cancel (); }); This.events (document.getElementById (this.id), "click", Function () {that.toedit (); }); }, Insertafter:function (newnode,reFerencenode) {//Inserts dynamically generated input boxes and buttons into the following if (referencenode.nextsibling) {ReferenceNode.parentNode.insertBefore of the element to be edited ( NewNode, referencenode.nextsibling); }else{var P=referencenode.parentnode | | document.body; P.appendchild (NewNode); }, Createelements:function () {//dynamically generate input boxes and button this.divcontainer=document.createelement ("div"); This.parentElement.appendChild (This.divcontainer); This.insertafter (This.divcontainer,document.getelementbyid (this.id)); This.input=document.createelement ("input"); This.input.type= "Text"; This.input.value=document.getelementbyid (this.id). InnerHTML; Initialization value This.divContainer.appendChild (this.input); This.btnsubmit=document.createelement ("input"); This.btnsubmit.value= "Submit"; This.btnsubmit.type= "button"; This.divContainer.appendChild (This.btnsubmit); This.btncancel=document.createelement ("input"); This.btncancel.type= "button"; This.btncancel.value= "Cancel"; This.divContainer.appendChild (This.btncancel); }, Toedit:function () {//Convert to edit State this.divcontainer.style.display= "Block"; document.getElementById (this.id). style.display= "None"; This.setvalue (); Toscan:function () {//Convert to browse State document.getElementById (this.id). style.display= "Block"; This.divcontainer.style.display= "None"; }, Getvalue:function () {//Gets the value of the input box return this.input.value; }, Setvalue:function () {//Set the value of the input box This.input.value=document.getelementbyid (this.id). InnerHTML; Save:function () {//Save Edit Results document.getElementById (this.id). Innerhtml=this.getvalue (); This.toscan (); }, Cancel:function () {//Cancel the current edit this.toscan (); } }; Onload=function () {editfield.configure ("P");//Call configure function, make sure that DOM element is edited in place} </script> </pead> <bod y> <p>edit demo</p> <p id= "P" > Yun-Habitat Community www.jb51.net</p> <p>copyright:super sha.</p& Gt </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
