Voici le code source, aucun traitement de style n'est effectué, mais la fonction est ok, j'espère que tout le monde pourra communiquer avec moi !
Copiez le code comme suit :
<html>
<tête>
<title>Cliquez pour faire apparaître les informations de sélection DIV</title>
<méta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="c'est ma page">
<méta http-equiv="content-type" content="text/html; charset=UTF-8">
</tête>
<corps>
<input type="text" onfocus="alertDivINFO(this, 'id', 'name', true, true, 600, 300, 'arrs')" />
<div style="position : absolue;"></div>
</corps>
</html>
<script type="text/javascript">
//informations sur le tableau
var arrs = nouveau tableau();
arrs.push({id : "1", nom : "Zhang San 3"});
arrs.push({id:"2", nom:"李思3"});
arrs.push({id:"3", nom:"Shen Wuwu 3"});
arrs.push({id:"4", nom:"Zhou Wansong3"});
arrs.push({id : "5", nom : "Qin Xiao a 3 ans"});
arrs.push({id:"6", nom:"王五"});
arrs.push({id:"7", nom:"Livre 3"});
/**
* obj : Cliquez sur l'objet de la zone de texte
* idStr : nom de la clé d'identification du tableau json
* nameStr : la clé de nom du tableau json
* bool : true : signifie ajouter false : signifie réaffecter
* boolSet : true : les valeurs ID et Name sont affichées false : seule la valeur Name est affichée
* widthNum : largeur de l'information DIV
* heightNum : la hauteur de l'information DIV
* arrName : nom du tableau
*/
fonction alertDivINFO(obj, idStr, nameStr, bool, boolSet, widthNum, heightNum, arrName){
obj.blur();
si(!widthNum){
widthNum = 600 ;
}
si(!hauteurNum){
hauteurNum = 350 ;
}
//Créer un grand DIV
var alertDivParent = document.createElement("div");
alertDivParent.id = "alerteDivParent";
avec (alerteDivParent.style){
haut = 0 ;
gauche = 0 ;
position = "absolu" ;
arrière-plan = "#EEEEEE" ;
filtre = "alpha(opacité=70)";
opacité = 0,7 ;
width = Math.max(document.body.clientWidth, document.body.scrollWidth);
hauteur = Math.max(document.body.clientHeight, document.body.scrollHeight);
}
document.body.appendChild(alertDivParent);
//Créer un petit DIV
var alertDiv = document.createElement("div");
alertDiv.id = "alerteDiv";
avec (alerteDiv.style){
largeur = numérolargeur ;
hauteur = numérohauteur ;
position = "absolu" ;
arrière-plan = "#DDDDDD" ;
gauche = (Math.max(document.body.clientWidth, document.body.scrollWidth) - widthNum) / 2;
top = (Math.max(document.body.clientHeight, document.body.scrollHeight) - heightNum) / 2;
}
//Ajouter au formulaire
document.body.appendChild(alertDiv);
//Créer un DIV de recherche
var alertQueryDiv = document.createElement("div");
alertQueryDiv.id = "alertQueryDiv";
//Ajoute le DIV recherché au DIV d'informations
alertDiv.appendChild(alertQueryDiv);
alertQueryDiv.innerHTML = "Nom de recherche :";
//Créer une zone de texte
var alertQueryINPUT = document.createElement("input");
alertQueryINPUT.id = "alertQueryINPUT";
alertQueryINPUT.type = "texte" ;
//Ajoute une zone de texte au DIV recherché
alertQueryDiv.appendChild(alertQueryINPUT);
//Créer un bouton de recherche
var alertQueryBUTTON = document.createElement("input");
alertQueryBUTTON.id = "alertQueryBUTTON";
alertQueryBUTTON.type = "bouton" ;
alertQueryBUTTON.value = "Rechercher" ;
//Ajouter un événement au bouton
alertQueryBUTTON.onclick = fonction(){
//Calculer combien de cellules peuvent être placées dans cette largeur
var tdWidthNum = 130 ;
var tdNum = parseInt(widthNum / tdWidthNum);
varnum = 0 ;
var j = 0 ;
//Récupère le tableau affichant les informations
var alertInfoTab = document.getElementById("alertInfoTab");
//Effacer les informations THhead
alertInfoTab.deleteTHead();
// tableau de boucles
for(var i = 0; i < eval(arrName).length; i ++){
// S'il est égal au tableau, ajoutez-le à TABLE
if(eval(arrName + "[i]." + nameStr).indexOf(alertQueryINPUT.value) >= 0){
en-tête var ;
si(j % tdNum == 0){
en-tête = alertInfoTab.createTHead();
en-tête = header.insertRow(num);
num++;
}
j++;
var headerName = header.insertCell(-1);
avec(headerName.style){
largeur = tdWidthNum ;
couleur = "bleu" ;
curseur = "pointeur" ;
}
si (boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + idStr) + ": " + eval(arrName + "[i]." + nameStr)));
sinon si(!boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + nameStr)));
headerName.onclick = function(){
si (bool)
obj.value = obj.value + this.innerHTML + ";";
sinon si(!bool)
obj.value = this.innerHTML ;
//Supprimer le formulaire pop-up
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
} ;
}
}
} ;
//Ajouter un bouton au DIV recherché
alertQueryDiv.appendChild(alertQueryBUTTON);
//Créer un bouton d'effacement
var alertClearBUTTON = document.createElement("input");
alertClearBUTTON.id = "alerteClearBUTTON";
alertClearBUTTON.type = "bouton" ;
alertClearBUTTON.value = "Effacer" ;
alertClearBUTTON.onclick = fonction(){
// Attribuer une valeur nulle à la zone de texte
obj.value = "";
//Supprimer le formulaire pop-up
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
} ;
//Ajouter un bouton au DIV recherché
alertQueryDiv.appendChild(alertClearBUTTON);
//Créer un bouton de fermeture
var alertCancelBUTTON = document.createElement("input");
alertCancelBUTTON.id = "alerteCancelBUTTON";
alertCancelBUTTON.type = "bouton" ;
alertCancelBUTTON.value = "Fermer" ;
alertCancelBUTTON.onclick = fonction(){
//Supprimer le formulaire pop-up
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
} ;
//Ajouter un bouton au DIV recherché
alertQueryDiv.appendChild(alertCancelBUTTON);
//Créer un tableau pour afficher les informations
var alertInfoTab = document.createElement("table");
alertInfoTab.id = "alerteInfoTab";
avec (alerteInfoTab.style){
marge = 20 ;
}
//Calculer combien de cellules peuvent être placées dans cette largeur
var tdWidthNum = 130 ;
var tdNum = parseInt(widthNum / tdWidthNum);
varnum = 0 ;
for(var i = 0; i < eval(arrName).length; i ++){
en-tête var ;
si(i % tdNum == 0){
en-tête = alertInfoTab.createTHead();
en-tête = header.insertRow(num);
num++;
}
var headerName = header.insertCell(-1);
avec(headerName.style){
largeur = tdWidthNum ;
couleur = "bleu" ;
curseur = "pointeur" ;
}
//var headerType = header.insertCell(-1);
si (boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + idStr) + ": " + eval(arrName + "[i]." + nameStr)));
sinon si(!boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + nameStr)));
//headerType.appendChild(document.createTextNode("Type"));
headerName.onclick = function(){
si (bool)
obj.value = obj.value + this.innerHTML + ";";
sinon si(!bool)
obj.value = this.innerHTML ;
//Supprimer le formulaire pop-up
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
} ;
}
//Ajouter une table au DIV qui affiche des informations
alertDiv.appendChild(alertInfoTab);
}
</script>