Hier ist der Quellcode, es wurde keine Stilverarbeitung durchgeführt, aber die Funktion ist in Ordnung, ich hoffe, jeder kann mit mir kommunizieren!
Kopieren Sie den Codecode wie folgt:
<html>
<Kopf>
<title>Klicken Sie hier, um Informationen zur DIV-Auswahl anzuzeigen</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="das ist meine Seite">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<Körper>
<input type="text" onfocus="alertDivINFO(this, 'id', 'name', true, true, 600, 300, 'arrs')" />
<div style="position: absolute;"></div>
</body>
</html>
<script type="text/javascript">
//Array-Informationen
var arrs = new Array();
arrs.push({id: „1“, Name: „Zhang San 3“});
arrs.push({id:"2", name:"李思3"});
arrs.push({id:"3", name:"Shen Wuwu 3"});
arrs.push({id:"4", name:"Zhou Wansong3"});
arrs.push({id: „5“, Name: „Qin Xiao ist 3“});
arrs.push({id:"6", name:"王五"});
arrs.push({id:"7", name:"Book 3"});
/**
* obj: Klicken Sie auf das Objekt des Textfelds
* idStr: ID-Schlüsselname des JSON-Arrays
* nameStr: der Namensschlüssel des JSON-Arrays
* bool: true: bedeutet Anhängen false: bedeutet Neuzuweisung
* boolSet: true: Sowohl der ID- als auch der Name-Wert werden angezeigt. False: Nur der Name-Wert wird angezeigt
* widthNum: Breite der Information DIV
* heightNum: die Höhe des Informations-DIV
* arrName: Array-Name
*/
Funktion alarmDivINFO(obj, idStr, nameStr, bool, boolSet, widthNum, heightNum, arrName){
obj.blur();
if(!widthNum){
widthNum = 600;
}
if(!heightNum){
heightNum = 350;
}
//Erstelle ein großes DIV
var alarmDivParent = document.createElement("div");
alarmDivParent.id = "alertDivParent";
with(alertDivParent.style){
oben = 0;
links = 0;
Position = „absolut“;
Hintergrund = "#EEEEEE";
filter = "alpha(opacity=70)";
Opazität = 0,7;
width = Math.max(document.body.clientWidth, document.body.scrollWidth);
height = Math.max(document.body.clientHeight, document.body.scrollHeight);
}
document.body.appendChild(alertDivParent);
//Erstelle ein kleines DIV
var alarmDiv = document.createElement("div");
alarmDiv.id = "alertDiv";
with(alertDiv.style){
width = widthNum;
Höhe = heightNum;
Position = „absolut“;
Hintergrund = "#DDDDDD";
left = (Math.max(document.body.clientWidth, document.body.scrollWidth) - widthNum) / 2;
top = (Math.max(document.body.clientHeight, document.body.scrollHeight) - heightNum) / 2;
}
//Zum Formular hinzufügen
document.body.appendChild(alertDiv);
//Such-DIV erstellen
var alarmQueryDiv = document.createElement("div");
alarmQueryDiv.id = "alertQueryDiv";
//Gesuchtes DIV zum Informations-DIV hinzufügen
alarmDiv.appendChild(alertQueryDiv);
alarmQueryDiv.innerHTML = "Suchname:";
//Textfeld erstellen
var alarmQueryINPUT = document.createElement("input");
alarmQueryINPUT.id = "alertQueryINPUT";
alarmQueryINPUT.type = "text";
//Fügen Sie dem gesuchten DIV ein Textfeld hinzu
alarmQueryDiv.appendChild(alertQueryINPUT);
//Suchschaltfläche erstellen
var alarmQueryBUTTON = document.createElement("input");
alarmQueryBUTTON.id = "alertQueryBUTTON";
alarmQueryBUTTON.type = "button";
alarmQueryBUTTON.value = "Suchen";
//Ereignis zur Schaltfläche hinzufügen
alarmQueryBUTTON.onclick = function(){
//Berechnen Sie, wie viele Zellen in dieser Breite platziert werden können
var tdWidthNum = 130;
var tdNum = parseInt(widthNum / tdWidthNum);
Varnum = 0;
var j = 0;
//Die Tabelle abrufen, die Informationen anzeigt
var alarmInfoTab = document.getElementById("alertInfoTab");
//THead-Informationen löschen
alarmInfoTab.deleteTHead();
//Schleifenarray
for(var i = 0; i < eval(arrName).length; i ++){
//Wenn gleich dem Array, füge es zu TABLE hinzu
if(eval(arrName + "[i]." + nameStr).indexOf(alertQueryINPUT.value) >= 0){
Var-Header;
if(j % tdNum == 0){
header = alarmInfoTab.createTHead();
header = header.insertRow(num);
num++;
}
j++;
var headerName = header.insertCell(-1);
with(headerName.style){
width = tdWidthNum;
Farbe = "blau";
Cursor = "Zeiger";
}
if(boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + „[i].“ + idStr) + „: „ + eval(arrName + „[i].“ + nameStr)));
sonst if(!boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + „[i].“ + nameStr)));
headerName.onclick = function(){
if(bool)
obj.value = obj.value + this.innerHTML + ";";
sonst wenn(!bool)
obj.value = this.innerHTML;
//Entferne das Popup-Formular
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
};
}
}
};
//Schaltfläche zum gesuchten DIV hinzufügen
alarmQueryDiv.appendChild(alertQueryBUTTON);
//Eine klare Schaltfläche erstellen
var alarmClearBUTTON = document.createElement("input");
alarmClearBUTTON.id = "alertClearBUTTON";
alarmClearBUTTON.type = "button";
alarmClearBUTTON.value = "Löschen";
alarmClearBUTTON.onclick = function(){
//Weisen Sie dem Textfeld einen Nullwert zu
obj.value = "";
//Entferne das Popup-Formular
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
};
//Schaltfläche zum gesuchten DIV hinzufügen
alarmQueryDiv.appendChild(alertClearBUTTON);
//Schließen-Schaltfläche erstellen
var alarmCancelBUTTON = document.createElement("input");
alarmCancelBUTTON.id = "alertCancelBUTTON";
alarmCancelBUTTON.type = "button";
alarmCancelBUTTON.value = "Schließen";
alarmCancelBUTTON.onclick = function(){
//Entferne das Popup-Formular
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
};
//Schaltfläche zum gesuchten DIV hinzufügen
alarmQueryDiv.appendChild(alertCancelBUTTON);
//Eine Tabelle erstellen, um Informationen anzuzeigen
var warningInfoTab = document.createElement("table");
alarmInfoTab.id = "alertInfoTab";
with(alertInfoTab.style){
Marge = 20;
}
//Berechnen Sie, wie viele Zellen in dieser Breite platziert werden können
var tdWidthNum = 130;
var tdNum = parseInt(widthNum / tdWidthNum);
Varnum = 0;
for(var i = 0; i < eval(arrName).length; i ++){
Var-Header;
if(i % tdNum == 0){
header = alarmInfoTab.createTHead();
header = header.insertRow(num);
num++;
}
var headerName = header.insertCell(-1);
with(headerName.style){
width = tdWidthNum;
Farbe = "blau";
Cursor = "Zeiger";
}
//var headerType = header.insertCell(-1);
if(boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + „[i].“ + idStr) + „: „ + eval(arrName + „[i].“ + nameStr)));
sonst 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 + ";";
sonst wenn(!bool)
obj.value = this.innerHTML;
//Entferne das Popup-Formular
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
};
}
//Tabelle zum DIV hinzufügen, die Informationen anzeigt
alarmDiv.appendChild(alertInfoTab);
}
</script>