Home > Developer > JavaScript

Using JavaScript implementation Click on the Input box pop-up form to select information _javascript tips

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Here in the source code, did not do style processing, but the function is OK, I hope you can communicate with me!

Copy Code code as follows:

<title> Click on the pop-up div selection Info </title>
<meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content= "This are my page" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">

<body>
<input type= "text" onfocus= "Alertdivinfo (this, ' id ', ' name ', True, true, MB, ' Arrs ')"/>
<div style= "Position:absolute;" ></div>
</body>

<script type= "Text/javascript" >

Array information
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
* ID Key name of Idstr:json array
* Namestr:json Array's name Key name
* Bool:true: Indicates append false: value is reset
* Values for BoolSet:true:ID and name are displayed false: only the value of name is displayed
* Widthnum: Width of information div
* Heightnum: The height of the information div
* Arrname: Array name
*/
function Alertdivinfo (obj, idstr, NAMESTR, bool, Boolset, Widthnum, Heightnum, Arrname) {
Obj.blur ();
if (!widthnum) {
Widthnum = 600;
}
if (!heightnum) {
Heightnum = 350;
}
Create a large div
var alertdivparent = document.createelement ("div");
Alertdivparent.id = "Alertdivparent";
With (Alertdivparent.style) {
top = 0;
left = 0;
Position = "absolute";
Background = "#EEEEEE";
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);
}
Document.body.appendChild (alertdivparent);
Create a small div
var alertdiv = document.createelement ("div");
Alertdiv.id = "AlertDiv";
With (Alertdiv.style) {
width = widthnum;
Height = heightnum;
Position = "absolute";
Background = "#DDDDDD";
left = (Math.max (document.body.clientWidth, Document.body.scrollWidth)-widthnum)/2;
top = (Math.max (document.body.clientHeight, Document.body.scrollHeight)-heightnum)/2;
}
Add to form
Document.body.appendChild (ALERTDIV);

Create a search div
var alertquerydiv = document.createelement ("div");
Alertquerydiv.id = "Alertquerydiv";
Add the div for the search to the information div
Alertdiv.appendchild (ALERTQUERYDIV);

alertquerydiv.innerhtml = "Search Name:";

Create a text box
var alertqueryinput = document.createelement ("input");
Alertqueryinput.id = "Alertqueryinput";
Alertqueryinput.type = "text";
Add a text box to the search div
Alertquerydiv.appendchild (Alertqueryinput);

Create a Search button
var Alertquerybutton = document.createelement ("input");
Alertquerybutton.id = "Alertquerybutton";
Alertquerybutton.type = "button";
Alertquerybutton.value = "Search";
Add an event to a button
Alertquerybutton.onclick = function () {
Calculate how many cells this width can fit
var tdwidthnum = 130;
var tdnum = parseint (widthnum/tdwidthnum);
var num = 0;
var j = 0;
Get table that displays information
var alertinfotab = document.getElementById ("Alertinfotab");
Clear the THEAD information
Alertinfotab.deletethead ();
Loop array
for (var i = 0; i < eval (arrname). length; i + +) {
Add to table if it is equal to the array
if (eval (arrname + [i]. "+ nameStr). IndexOf (Alertqueryinput.value) >= 0) {
var header;
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";
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 + this.innerhtml + ";";
else if (!bool)
Obj.value = this.innerhtml;
Remove a pop-up form
Document.body.removeChild (ALERTDIV);
Document.body.removeChild (alertdivparent);
};
}
}
};
Add a button to the search div
Alertquerydiv.appendchild (Alertquerybutton);

Create the Purge button
var Alertclearbutton = document.createelement ("input");
Alertclearbutton.id = "Alertclearbutton";
Alertclearbutton.type = "button";
Alertclearbutton.value = "Empty";
Alertclearbutton.onclick = function () {
Assigning null values to a text box
Obj.value = "";
Remove a pop-up form
Document.body.removeChild (ALERTDIV);
Document.body.removeChild (alertdivparent);
};
Add a button to the search div
Alertquerydiv.appendchild (Alertclearbutton);

Create a Close button
var Alertcancelbutton = document.createelement ("input");
Alertcancelbutton.id = "Alertcancelbutton";
Alertcancelbutton.type = "button";
Alertcancelbutton.value = "Close";
Alertcancelbutton.onclick = function () {
Remove a pop-up form
Document.body.removeChild (ALERTDIV);
Document.body.removeChild (alertdivparent);
};
Add a button to the search div
Alertquerydiv.appendchild (Alertcancelbutton);

Create a table that displays information
var alertinfotab = document.createelement ("table");
Alertinfotab.id = "Alertinfotab";
With (Alertinfotab.style) {
margin = 20;
}

Calculate how many cells this width can fit
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) {
width = tdwidthnum;
color = "Blue";
cursor = "pointer";
}
var headertype = Header.insertcell (-1);
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));
Headertype.appendchild (document.createTextNode ("Type"));

Headername.onclick = function () {
if (BOOL)
Obj.value = obj.value + this.innerhtml + ";";
else if (!bool)
Obj.value = this.innerhtml;
Remove a pop-up form
Document.body.removeChild (ALERTDIV);
Document.body.removeChild (alertdivparent);
};
}
To add a table to the div that displays information
Alertdiv.appendchild (Alertinfotab);
}
</script>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
html form input box javascript input box value form input select html form input select select input form javascript select input javascript form input
Related Article
JavaScript solution to the eight Queens Problem method summar...
The difference between single and double quotes in JavaScript...
Http status code: 301, 302 redirection, 302 redirection
Ajax and 302 response code test_javascript-js tutorial

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More