Home > Developer > JavaScript
This article is mainly on the use of JavaScript implementation click the Input box pop-up form to select information into the example row of detailed introduction, the need for friends can come to the reference, I hope to help everyone else
Here in the source code, did not do style processing, but the function is OK, I hope you can communicate with me! Code as follows: <html> <head> <title> Click Popup div Select information </title> < Meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" > <meta http-equiv= " Description "content=" This is the My page "> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "> </head> <body> <input type=" text "onfocus=" Alertdivinfo ( This, ' id ', ' name ', True, true, Arrs, '/> <div style= ' Position:absolute; ></div> </body> </html> <script type= "Text/javascript" > //Array information & Nbsp;var Arrs = new Array (); arrs.push ({id: "1", Name: "Zhang 33"}); arrs.push ({ID: "2", Name: "Li 43"}); arrs.push ({ID: "3", Name: "Shen 3"}); arrs.push ({ID: "4", Name: "Zhou 3"}); arrs.push ({ID: "5", Name: "Shao is 3"}); arrs.push ({ID: "6", Name: "Harry"}); arrs.push ({ID:"7", Name: "Treasure 3"}); /** * obj: Click on the Text box object * idstr:json array ID key name * namestr:json Array's name Key name * bool: true: Indicates append f Alse: Values for * BoolSet:true:ID and name are displayed as false: Displays only the value of name * widthnum: The width of the information div * heightnum: The height of the information div &NB sp;* arrname: Array name */function alertdivinfo (obj, idstr, NAMESTR, bool, Boolset, Widthnum, Heightnum, arrname) {  ; Obj.blur (); if (!widthnum) { widthnum = } if (!heightnum) { Heightnum = //;} Create a large div var alertdivparent = document.createelement ("div"); alertdivparent.id = "Alertdivparent"; with (Alertdivparent.style) { top = 0; left = 0; Position = "absolute"; background = "#EEE EEE "; Filter = "alpha (opacity=70)"; opacity = 0.7; Width = math.max (document.body.clientWidth, document.body.scrollWidth); Height = math.max (document.body.clientHeight, document.body.scrollHeight); } d Ocument.body.appendChild (alertdivparent); //Create small div var alertdiv = document.createelement ("div"); alertdiv.id = "AlertDiv"; with (Alertdiv.style) { width = widthnum height = heightnum; position = "absolute"; BACKG Round = "#DDDDDD"; Left = (Math.max (Document.body.clientWidth, Document.body.scrollWidth)-widthnum)/2; Top = (Math.max (Document.body.clientHeight, Document.body.scrollHeight)-heightnum)/2; &NBSP} //Add to form document.body.appendchild (ALERTDIV); //Create a search for div var alertquerydiv = document.createelement ("div"); alertquerydiv.id = "Alertquerydiv"; //adds the search div to the information Div alertdiv.appendchild (ALERTQUERYDIV); alertquerydiv.innerhtml = "Search name:"; //Create text box var alertqueryinput = document.createelement ("input"); alertqueryinput.id = "Alertqueryinput"; Alertqueryinput.tyPE = "text"; //Add text box to search div alertquerydiv.appendchild (alertqueryinput); //Create Search button var Alertquerybutton = document.createelement ("input"); alertquerybutton.id = "Alertquerybutton"; Alertquerybutton.type = "button"; Alertquerybutton.value = "search"; /Add events to the button Alertquerybutton.onclick = function () { //calculate how much of the width can be put in the cell var tdwidthnum = 130; var tdnum = parseint (widthnum/tdwidthnum); var num = 0; var j = 0; //Get the table that displays the information var alertinfotab = document.getElementById ("Alertinfotab"); //emptying of thead information alertinfotab.deletethead (); //Loop array for (var i = 0; i < eval (arrname). length; i + +) { //add to table if equal to the array &nb Sp if (eval (arrname + [i]. "+ nameStr). IndexOf (Alertqueryinput.value) >= 0) { VAR header;   ; &nbsP if (j% Tdnum = = 0) { header = Alertinfotab.createthead (); header = Header.insertrow (num); num + +; } J + +; var headername = Header.insertcell (-1); with (Headername.style) { width = tdwidthnum color = "Blue"; & nbsp cursor = "pointer"; } if (boolset) headername.appendchild document.createTextNode (eval ( Arrname + "[i]." + idstr) + ":" + eval (arrname + "[i]." + nameStr))); ELSE if (!boolset) headername.appendchild (document.createTextNode (eval (arrname + "[i]) . "+ nameStr)"); Headername.onclick = function () { if (BOOL) Obj.value = Obj.value + t His.innerhtml + ";"; else if (!bool) Obj.value = this.innerhtml; //Remove pop-up form &NBSP;d Ocument.body.removeChild (ALERTDIV); document.body.removechild (alertdivparent); }; &NBSP } }; //Add button to search div alertquerydiv.appendchild (Alertquerybutton); //Create empty button var Alertclearbutton = document.createelement ("input"); alertclearbutton.id = "Alertclearbutton"; Alertclearbutton.type = "button"; Alertclearbutton.value = "Empty"; Alertclearbutton.onclick = function () { //give text box null value obj.value = ""; //Remove pop-up form document.body.removeChild (ALERTDIV); Document.body.removeChild (alertdivparent); }; //Add button to search div alertquerydiv.appendchild (Alertclearbutton); //Create Close button var Alertcancelbutton = document.createelement ("input"); alertcancelbutton.id = "Alertcancelbutton"; &NBSp Alertcancelbutton.type = "button"; Alertcancelbutton.value = "close"; Alertcancelbutton.onclick = function () { //Remove pop-up form document.body.removeChild (ALERTDIV); Document.body.removeChild (alertdivparent); }; //Add button to search div alertquerydiv.appendchild (Alertcancelbutton); //CREATE table var alertinfotab = document.createelement ("table") to display information; alertinfotab.id = "Alertinfotab"; with (alertinfotab.style) { margin = } //calculates how many cells the width can be placed var tdwidthnum = 130; var tdnum = parseint (widthnum/tdwidthnum); var num = 0; for (var i = 0; i < eval (arrname). Length i + +) { var header; If (i% Tdnum = 0) { header = Alertinfotab.createthead (); header = Header.insertrow (num); num + +; } var headername = Header.insertcell (-1); with (Headername.style) { &NBSP;WIDTH = Tdwidthnum; color = "Blue"; cursor = "pointer"; } //var Headertype = Header.insertcell (-1); if (boolset) headername.appendchild (document.createTextNode (eval (arrname + "[i]." + idstr) + ":" + Eva L (arrname + "[i]." + nameStr)); Else if (!boolset) headername.appendchild (document.createTextNode (eval (arrname + "[i]." + nameStr)) ); //headertype.appendchild (document.createTextNode ("Type")); Headername.onclick = function () { &NBSP;IF (bool) Obj.value = Obj.value + this.innerhtml + ";"; else if (!bool) obj.value = this.innerhtml; //removes the pop-up form document.body.removechild (ALERTDIV); document.body.removechild (alertdivparent); }; &NBSP} //Add table to div Alertdiv.appendchild (Alertinfotab) that displays information; } </script> Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
