This example uses JSP + Ajax + text to demonstrate multiple selections, select all, add, delete, and update checkboxes for multiple checkboxes.
This example fully demonstrates the effect of using JavaScript to control the HTML DOM and to pass data through XML HTTP, using JSP to manipulate text .
1,javascript is used to control the reality of page content and the effect of adding and deleting;
2,jsp as the background, the text read, write, update and other operations;
3, text format is used to store data, data encoding utf-8;4, this example in win32,red hat Linux 9 under Jdk1.5,tomcat 5.0,apache 2.5 debugging through, while compatible with Firefox 1.0,opera 8.0,ie6.
Advantages of this example:
1, create HTML objects in real time, see the resulting page additions and deletions operation. The display speeds up and increases the user experience.
2,xml http Pass data is just an ID or a form value that saves bandwidth.
3, this example is suitable for the use of XML HTTP, so this effect is strong, but js/jsp code is very simple.
4, there are many things that can be shared in other projects and solve the problem of manipulating text encoding for Chinese characters. (This example runs in the Chinese operating system, so the GBK encoding is selected, if the OS is in English, it needs to be processed differently, for example, to encode as UTF-8, or to convert the code as needed.) )
5, with drag and expand the effect of closure, with cookies recorded location and turn off state, can be used in a project.
6, there are rich notes, suitable for beginners to explore together.
Disadvantages :
1, maintenance debugging trouble, for this effect is worth doing this? If you use the normal way, embedding an IFRAME in, will not be able to.
2, the code is not more optimized, abbreviated, and some places redundant.
3, the interaction design does not do well, here is the main expression of technology to achieve and exchange.
source file Download : Checkbox.rar
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <HTML> <HEAD> <TITLE> jsp+ajax Add Delete ch Eckbox Instance Example test</title> <meta name= "generator" content= "EditPlus" > <meta name= "Author" "CONTENT=" " > <meta name= "Keywords" content= "> <meta name=" Description "content=" "> <script type=" Text/javascri PT "> function $ () {var elements = new Array (); for (var i = 0; i < arguments.length i++) {var element = Arguments[i]; if (typeof element = = ' String ') element = document.getElementById (element); if (arguments.length = = 1) return element; Elements.push (Element); return elements; }//cody by Jarry; var emptycol= "", overcol= "#f1f1f1", checkedcol= "#F4FFF4"; function Getabsoluteleft (OB) {if (!OB) {return null;} var obj = ob; var objleft = obj. offsetleft; while (obj!= null && obj. offsetparent!= null && obj. offsetparent.tagname!= ' body") {objleft = obj. offsetparent.offsetleft; obj = obj. offsetparent; return objleft; }//Get absolute top position function getabsolutetop (ob) {if (!OB) {return null;} var obj = ob; var objtop = obj. offsettop; while (obj!= null && obj. offsetparent!= null && obj. offsetparent.tagname!= ' body ') {objtop = OB J. Offsetparent.offsettop; obj = obj. offsetparent; return objtop; } String.prototype.trim = function () {return this.replace (/^\s*) | ( \s*$)/g, ""); function Isexist (child,obj) {//obj has element the child; for (Var i=0;i<obj.elements.length;i++) {if (obj.elements[i].tagname.tolowercase () = = "Input" && obj.elements[i].type== "checkbox" {if (obj.elements[i].value==child) return true; return false; The function Validateurl (URL) {//validateurl if (url.search/^[a-za-z0-9-]+\.[ a-za-z0-9]+[\/=\?%\ -&_~ ' @[\]\ ': +!] * ([^<>\ "\]) *$/)!=0) {returnFalse }else if (url.substring (0,4) = = "www.") {//return false; }else{return true; } function Countlength (obj) {if (obj==null) return; var Dlen = 0,slen = 0; For (i=0 i< obj.length i++) {if (Obj.charcodeat (i) > "0" && obj.charcodeat (i) < "128") slen+=1 ; else dlen+=2; } Totallen = Slen+dlen; return Totallen; var strall=unescape ("%u5168%u9009"); var canall=unescape ("%u53d6%u6d88"); function Clickchk (obj) {var allcheck=true; for (Var i=0;i<obj.elements.length;i++) {var eli = obj.elements[i]; if (eli.tagName.toLowerCase () = = "Input" && eli.type== "checkbox") {Eli.parentNode.style.backgroundColor = Eli. Checked? Checkedcol: ""; if (eli.checked==false) {allcheck=false;} } obj.elements["Check"].value=allcheck?canall:strall; function Addsite (obj) {var url=obj.url.value.trim (); if (Url.match (/^\s*$/g) | | |!validateurl (URL)) {alert ("Please enter the correct URL: such as mysite.com"); Obj.url.focus (); return;} if (Isexist (url,obj)) {alert ("The URL you added already exists in the list"); var List=document.getelementbyid ("list"); var chkbox=document.createelement ("input"); chkbox.type= "checkbox"; Chkbox.onclick=function () {clickchk (obj);} Check button after all select to show cancellation; Chkbox.value=url; Chkbox.name= "Url_chkbox"; var hr=document.createelement ("HR"); hr.size= "0"; hr.style.bordertop= "1px solid gray"; var txt=document.createtextnode (URL); var div=document.createelement ("div"); Div.appendchild (Chkbox); Div.appendchild (TXT); Div.style.borderbottom= "1px dashed gray"; Div.style.padding= "5px"; Div.appendchild (HR); Div.style.backgroundColor = "Olive"; Div.onmouseover=function () {showdelete (this); } div.onmouseout=function () {hidedelete (this); } list.appendchild (div); End add; Remove the Disable if you have already added a multiple-selection box; if (obj.check.disabled==true) {obj.check.disabled=false; obj.recheck.disabled = false; Obj.remove.disabled=false; return false; function Checkall (obj) {//Select all or deselect all; var chk=obj.elements["Check"]; for (Var i=0;i<obj.elements.length;i++) {if (obj.elements[i].tagname.tolowercase () = = "Input" && obj.elements[i].type== "checkbox" {if (Chk.value==strall) {//check all checkbox input; Obj.elements[i].checked=true; Obj.elements[i].parentnode.style.backgroundcolor = Checkedcol; }else{Obj.elements[i].checked=false; Obj.elements[i].parentnode.style.backgroundcolor = Emptycol; }} if ($ (' list '). childnodes.length<=1) return; Chk.value=chk.value==canall?strall:canall; Change the display of all select/Cancel; function Reversecheck (obj) {var chk=obj.elements[' check ']; for (Var i=0;i<obj.elements.length;i++) {if (obj.elements[i].tagname.tolowercase () = = "Input" && obj.elements[i].type== "checkbox" {obj.elements[i].checked = obj.elements[i].checked? false:true; } clickchk (obj); }} function del (list,obj) {//delete the contents of the list var candel=false; var i=list.childnodes.length; var end =-1; while (i > End) {//If there is a child var s=list.childnodes[i]; if (typeof (s)!= "undefined" && s.tagname) {try{//If the type of child is not null; var tgname = S.tagname.touppercase (); if (tgname!= "DIV" | | | | s.childnodes.length <=0) return; The subset is DIV and also has a subset of var S1 = s.childnodes[0]; if (s1.type.toLowerCase () = = "checkbox" && s1.checked==true) {//If the checkbox in the subset is selected, delete the subset (DIV); Candel = true; List.removechild (s); }}catch (ex) {//alert (ex.tostring ()); }} i--; } if (Candel==false) {alert ("Please select the option you want to delete")} Isdisabledbutton (); function Isdisabledbutton () {var objform=document.sitelist; var list=$ ("List"); var hasdivchild = false; if (list.childnodes.length>0) {for (Var i=0;i<list.childnodes.length;i++) {var s=list.childnodes[i]; if (typeof (s)!= "undefined" && s.tagname) {if (s.tagname.touppercase () = "DIV") H Asdivchild = true; }} objform.check.disabled= hasdivchild?false:true; Objform.recheck.disabled= hasdivchild?false:true; Objform.check.value=strall; Objform.remove.disabled= hasdivchild?false:true; function Delsingle (objparent,objdel,objchild) {objparent.removechild (objchild); Objdel.style.display= "None"; Isdisabledbutton (); function Editsingle (objparent,objedit,objchild) {function makelink (text, tag) {var temobj = d Ocument.createelement (tag); Temobj.style.marginleft= "5px"; Temobj.style.marginright= "5px"; temobj.style.textdecoration= "underline"; temobj.style.cursor= "pointer"; Temobj.appeNdchild (document.createTextNode (text)); return temobj; } try{var secondchild = objchild.childnodes[1]; var url = secondchild; var urlstr = url.nodevalue//? Url.nodeValue:url.toString (); if (Urlstr==null | | urlstr.trim== "") return; var Editorpanel = document.createelement ("span"); Objchild.removechild (URL); var editor = document.createelement ("input"); Editor.type= "Text"; var maxlen = parseint (objparent.style.width)-250; var maxlen = 50; var Thislen = parseint (Countlength (URLSTR)); Editor.size = maxlen > Thislen? Thislen:maxlen; Editor.value = Urlstr; Editor.select (); Editor.onmouseover=function () {this.select ();} var update = Makelink ("Update", "Font"); update.title= "Update"; Update.onclick=function () {//updatecontens (); var newvalue = Editor.value; if (newvalue.trim () = = "") {Editor.focus (); return;} ObjchilD.removechild (Objchild.childnodes[1]); Objchild.appendchild (document.createTextNode (newvalue)); var cancle = Makelink ("cancle", "Font"); cancle.title= "Cancel"; Cancle.onclick=function () {objchild.removechild (objchild.childnodes[1]); Objchild.appendchild (URL); }//add to Editorpanel; Editorpanel.style.fontsize= "11px"; Editorpanel.style.color= "Blue"; Editorpanel.appendchild (editor); Editorpanel.appendchild (update); Editorpanel.appendchild (document.createTextNode ("|)"); Editorpanel.appendchild (cancle); Add to Objchild; Objchild.appendchild (Editorpanel); }catch (ex) {alert (ex.tostring ()); }finally{//} var Currentdiv; function Showdelete (self) {self.style.backgroundColor = Overcol; Currentdiv = self; var Theid = "Del_icon"; if (!$ (Theid)) {var deldiv=document.createelement ("div"); Deldiv.id=theid; var D=deldiv; D.style.textalign= "Center";d. style.fontsize= "11px"; var edit = document.createelement ("span"); Edit.title= "edit this article"; edit.style.textdecoration= "underline"; Edit.onclick=function () {editsingle (currentdiv.parentnode,this.parentnode,currentdiv); var del = document.createelement ("span"); del.title= "Delete this article";d el.style.textdecoration= "underline"; Del.onclick=function () {delsingle (currentdiv.parentnode,this.parentnode,currentdiv); } edit.appendchild (document.createTextNode ("edit")); D.appendchild (edit); D.appendchild (document.createTextNode ("|)"); Del.appendchild (document.createTextNode ("delete")); D.appendchild (DEL); D.style.width= "80px"; D.style.lineheight= "20px"; D.style.color= "Blue"; d.style.zindex= "-10"; D.style.backgroundcolor= "Green"; Document.body.appendChild (d); $ (Theid). Onmouseover=function () {currentDiv.style.backgroundColor = Overcol; THis.style.display= ""; Mouseondeletediv=true; }//$ (Theid). style.cursor= "Pointer"; } if ($ (Theid)) {$ (Theid). style.display= ""; var l= getabsoluteleft (self) + self.offsetwidth-80; var t= getabsolutetop (self) + 5; var scrollt = self.parentnode.scrolltop;//minus the height of the scroll bar appearing; var t= getabsolutetop (self) + 5-scrollt; $ (Theid). style.position= "Absolute"; $ (theid). Style.left = l+ "px"; $ (theid). Style.top = t+ "px"; } function Hidedelete (self) {var Theid = "Del_icon"; if ($ (Theid)) {self.style.backgroundColor = Self.childnodes[0].checked?checkedcol:emptycol; $ (Theid). style.display= "None"; } </script> </HEAD> <BODY> <style>. drag{position:absolute;width:600px Background-color: #f1f1f1; Filter:alpha (opacity=100); -moz-opacity:1.0; opacity:1.0; }. da{width:100%;background-color:gray;cursor:move;font-size:14px;vertical-align:middle;line-height:30px}. Max_ Min_btn{float: Right;color:red;cursor:pointer;font-size:9pt;width:50px;line-height:30px;text-align:center;} #list {border-top:2px Ridge #9A9898 border-left:2px Ridge #9A9898 border-bottom:1px Solid #D4D0C8 border-right:1px Solid #D4D0C8 Background:white;width:578px;height:350px;margin:10px;overflow:auto} shadowbottom{margin-left:6px ; Height:5px;background:gray;font-size:0px;line-height:0px;filter:alpha (opacity=55);-moz-opacity:0.55;opacity:0 .55;} </style> <pre> This example uses JSP + Ajax + text to demonstrate multiple selections, select all, add, delete, and update checkboxes for multiple checkboxes. This example fully demonstrates the effect of using JavaScript to control the HTML DOM and to pass data through XML HTTP, using JSP to manipulate text. 1,javascript is used to control the reality of page content and the effect of adding and deleting; 2,jsp as the background, the text read, write, update and other operations; 3, the text format is used to store data, data encoding UTF-8; 4, this example is debugged under win32,red hat Linux 9 under Jdk1.5,tomcat 5.0,apache 2.5 and is compatible with Firefox 1.0,opera 8.0,ie6. On-line Description document http://jiarry.blogchina.com/5599587.html static page demo Address: http://jarryli.googlepages.com/checkbox_test.html (Detailed description , then added) source file download Address: Http://jarryli.googlepages.com/checkbox.rar Other previous Php+ajax Post program example: HTTP://JIARRY.BLOGCHINA.COM/5555296.html source Download: Http://jarryli.googlepages.com/post_ajax.rar JSP login license code NO REFRESH hint: http://jiarry.blogchina.com/5287654. HTML source Download: Http://jarryli.googlepages.com/imgValidate.rar <div class= "Drag" rel= "drag" id= "Sitemaindarg" Onmousedo Wn= "Dargit (this,event);" > <div class= "da" ><span class= "max_min_btn" id= "Max_min" ><font >2</font>close</span > Drag area </div> <div id= "Sitelistdiv" > <form name= "sitelist" onsubmit= "return Addsite" (this) ; "><br clear=" All "> http://<input type=" text "size=" "name=" url "onmouseover=" This.focus () "> <input type= button" name= "Add" value= "Add URL to List" onclick= "Addsite (this.form)" > <div id= "List" > <di V onmouseover= "Showdelete (this);" Onmouseout= "Hidedelete (this);" ><input type=checkbox value= "example.com" name= "Url_chkbox" onClick= "Clickchk ( This.form) ">example1.com </div> <div onmouseover=" Showdelete (This), "onmouseout=" hidedelete (this); " ≫<input type=checkbox value= "example.com" name= "Url_chkbox" onclick= "Clickchk (this.form)" >example2.com < /div> </div> <input type= "button" name= check "value=" Select All "Disabled onclick=" Checkall ( This.form) "> <input type= button" value= "name=" recheck "Disabled onclick=" Reversecheck ( This.form) "> <input type=" button "name=" Remove "disabled value=" delete "onclick=" del (' list '), This.form) "> </form> </div> <div class=" Shadowbottom "> </div> </div> Cody by JarryLi@gmail.com; The CopyRight? Jarry,all Right reserved! This example is for personal reference only, please keep the copyright information for reference. Thank you! homepage:jiarry.126.com blog:http://jiarry.blogchina.com <script>//Page load initialization function init (l,f) {var list=l; f.check.disabled=list.childnodes.length>1?false:true; f.recheck.disabled=list.childnodes.length>1?false:true; F.check.value=strall; f.remove.disabled=list.childnodes.length>1?false:true; } window. Onload=function () {init ($ ("list"), document.sitelist); } Activecookie = true; if (document.cookie==null) {//alert ("Cookies are not turned on!") "); Activecookie = false; function GetCookie (name) {if (!activecookie) return; var Nameeq = name + "="; var ca = Document.cookie.split (';'); for (Var i=0;i < ca.length;i++) {var c = ca[i]; while (C.charat (0) = = ') c = c.substring (1,c.length); if (C.indexof (nameeq) = = 0) return c.substring (nameeq.length,c.length); return null; function Setcookie (name, value) {if (!activecookie) return; var expdate = new Date (); Expdate.settime (Expdate.gettime () + (365*24*120)); Document.cookie= "" + name + "=" + Value + "expires=" + expdate.togmtstring (); var theleft = GetCookie ("Sitemaindargleft")!=null? GetCookie ("Sitemaindargleft"): 10; var thetop = GetCookie ("Sitemaindargtop")!=null? GetCookie ("Sitemaindargtop"): 10; var listdivdisplay = GetCookie ("SiTelistdivdisplay ")!=null? GetCookie ("Sitelistdivdisplay"): ""; $ ("Sitemaindarg"). Style.top = thetop; $ ("Sitemaindarg"). Style.left = Theleft; $ ("Sitelistdiv"). style.display = Listdivdisplay; Cookie end; var d_width = 550; var d_height = 30; var ey=0,ex=0,lx=0,ly=0,candrg=false,thiso=null;//var x, y,rw,rh; var divs=document.getelementsbytagname ("div"); for (Var i=0;i<divs.length;i++) {if (Divs[i].getattribute ("rel") = = "Drag") {divs[i].onmousemove=funct Ion () {thismove (this);//Real-time get the current object and mouse values to determine the drag and close area; }} function Thismove (o) {rw = parseint (x)-parseint (Getabsoluteleft (o)); RH = parseint (y)-parseint (Getabsolutetop (o)); function Dargit (o,e) {thiso = O; CANDRG = true; if (!document.all) {lx = e.clientx; ly = E.clienty; }else{lx = event.x; ly = Event.y; try{//setting gradient; if (rh<=d_height && rw<d_width &&rh>0) {//Set in the drag area if (document.all) thiso.filters.alpha.opacity=80; else thiso.style.mozopacity=80/100; }}catch (e) {} st (o); } Document.onmousemove = function (e) {if (!document.all) {x = e.clientx; y = e.clienty;} else{x = event.x; y = event.y;} if (CANDRG) {if (rh<=d_height && rw<d_width &&rh>0) {//If you want to set the drag area to be judged var OFSX = x- lx Thiso.style.left = (parseint (thiso.style.left) + ofsx) + "px"; LX = x; var ofsy = y-ly; Thiso.style.top = (parseint (thiso.style.top) + Ofsy) + "px"; ly = y; }else{Candrg=false; Document.onmouseup=function () {candrg=false;//drag variable set to False try{if (document.all) THISO.FILTERS.ALP ha.opacity=100; else thiso.style.mozopacity=100; }catch (e) {} if (document.all && thiso!= null) {thiso.releasecapture (); Thiso = null; } function St (o) {if (RH <= d_height && RW; = d_width) {candrg=false; Showhide ($ ("Sitelistdiv")); } function Showhide (obj,self) {obj.style.display = obj.style.display== ' None '? ': ' None '; $ ("Del_icon"). display= "None"; var icon = "1"; var text = "OPEN"; if (obj.style.display== "") {icon = "2"; Text = "Close"; } $ ("Max_min"). childnodes[0].innerhtml = icon; $ ("Max_min"). Childnodes[1].nodevalue = text; } window.onunload = function () {Setcookie ("Sitemaindargleft", Getabsoluteleft ($ ("Sitemaindarg")); Setcookie ("Sitemaindargtop", Getabsolutetop ("Sitemaindarg")); Setcookie ("Sitelistdivdisplay", $ ("Sitelistdiv"). Style.display); } </script> </BODY> </HTML>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
As time is limited, it is inevitable that there will be many problems and I hope Members will come forward. In fact, this example does not how good, take out the hope that a lot of people into the guidance, but also hope to be a beginner's friend is helpful, but also hope that we exchange progress, thank you! :p
In addition to the previous do about Ajax Dongdong, by the way please for reference, thank you!
Php+ajax Post Program example: http://jiarry.blogchina.com/5555296.html
source Download: Post_ajax.rar
JSP login license code NO REFRESH hint: http://jiarry.blogchina.com/5287654.html
source Download: Imgvalidate.rar
The code is not sorted, optimized, so this example only for everyone to exchange reference, I hope that this way to get everyone's help, thank you!
Classic Forum Discussion :
http://bbs.blueidea.com/viewthread.php?tid=2673442
