Aquí está el código fuente, no se realiza ningún procesamiento de estilo, pero la función está bien, ¡espero que todos puedan comunicarse conmigo!
Copie el código de código de la siguiente manera:
<html>
<cabeza>
<title>Haga clic para que aparezca la información de selección DIV</title>
<meta http-equiv="palabras clave" contenido="palabra clave1, palabra clave2, palabra clave3">
<meta http-equiv="descripción" contenido="esta es mi página">
<meta http-equiv="tipo de contenido" contenido="texto/html; conjunto de caracteres=UTF-8">
</cabeza>
<cuerpo>
<input type="text" onfocus="alertDivINFO(this, 'id', 'name', true, true, 600, 300, 'arrs')" />
<div estilo="posición: absoluta;"></div>
</cuerpo>
</html>
<tipo de script="texto/javascript">
//información de la matriz
var arrs = nueva matriz();
arrs.push({id: "1", nombre: "Zhang San 3"});
arrs.push({id:"2", nombre:"李思3"});
arrs.push({id:"3", nombre:"Shen Wuwu 3"});
arrs.push({id:"4", nombre:"Zhou Wansong3"});
arrs.push({id: "5", nombre: "Qin Xiao es 3"});
arrs.push({id:"6", nombre:"王五"});
arrs.push({id:"7", nombre:"Libro 3"});
/**
* obj: haga clic en el objeto del cuadro de texto
* idStr: nombre de clave de identificación de la matriz json
* nameStr: la clave de nombre de la matriz json
* bool: verdadero: significa agregar falso: significa reasignar
* boolSet: true: se muestran los valores de ID y Nombre false: solo se muestra el valor de Nombre
* widthNum: ancho de la información DIV
* heightNum: la altura de la información DIV
* arrName: nombre de la matriz
*/
función alertDivINFO(obj, idStr, nameStr, bool, boolSet, widthNum, heightNum, arrName){
obj.desenfoque();
si(!anchoNum){
anchoNúm = 600;
}
si(!alturaNum){
númeroaltura = 350;
}
//Crea un DIV grande
var alertDivParent = document.createElement("div");
alertDivParent.id = "alertDivParent";
con(alertDivParent.style){
arriba = 0;
izquierda = 0;
posición = "absoluta";
fondo = "#EEEEEE";
filtro = "alfa(opacidad=70)";
opacidad = 0,7;
ancho = Math.max(document.body.clientWidth, document.body.scrollWidth);
altura = Math.max(document.body.clientHeight, document.body.scrollHeight);
}
documento.body.appendChild(alertDivParent);
//Crea un pequeño DIV
var alertDiv = document.createElement("div");
alertaDiv.id = "alertaDiv";
con(alertaDiv.estilo){
ancho = anchoNum;
altura = alturaNum;
posición = "absoluta";
fondo = "#DDDDDD";
izquierda = (Math.max(document.body.clientWidth, document.body.scrollWidth) - widthNum) / 2;
arriba = (Math.max(document.body.clientHeight, document.body.scrollHeight) - heightNum) / 2;
}
//Agregar al formulario
documento.body.appendChild(alertDiv);
//Crear DIV de búsqueda
var alertQueryDiv = document.createElement("div");
alertQueryDiv.id = "alertQueryDiv";
//Agrega el DIV buscado al DIV de información
alertaDiv.appendChild(alertQueryDiv);
alertQueryDiv.innerHTML = "Nombre de búsqueda:";
//Crear cuadro de texto
var alertQueryINPUT = document.createElement("entrada");
alertQueryINPUT.id = "alertQueryINPUT";
alertQueryINPUT.type = "texto";
//Agrega un cuadro de texto al DIV buscado
alertQueryDiv.appendChild(alertQueryINPUT);
//Crear botón de búsqueda
var alertQueryBUTTON = document.createElement("entrada");
alertQueryBUTTON.id = "alertQueryBUTTON";
alertQueryBUTTON.type = "botón";
alertQueryBUTTON.value = "Buscar";
//Añadir evento al botón
alertQueryBUTTON.onclick = función(){
//Calcula cuantas celdas se pueden colocar en este ancho
var tdWidthNum = 130;
var tdNum = parseInt(anchoNum / tdWidthNum);
varnum = 0;
var j = 0;
//Obtener la tabla que muestra la información
var alertInfoTab = document.getElementById("alertInfoTab");
//Borrar información del cabezal
alertInfoTab.deleteTHead();
//matriz de bucle
for(var i = 0; i < eval(arrName).length; i ++){
//Si es igual a la matriz, agrégala a la TABLA
if(eval(arrName + "[i]." + nameStr).indexOf(alertQueryINPUT.value) >= 0){
encabezado var;
si(j % tdNum == 0){
encabezado = alertInfoTab.createTHead();
encabezado = encabezado.insertRow(núm);
número++;
}
j++;
var headerName = encabezado.insertCell(-1);
con (nombre del encabezado.estilo) {
ancho = tdWidthNum;
color = "azul";
cursor = "puntero";
}
si(boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + idStr) + ": " + eval(arrName + "[i]." + nameStr)));
si no (!boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + nameStr)));
headerName.onclick = función(){
si(booleano)
obj.valor = obj.valor + this.innerHTML + ";";
si no (!bool)
obj.value = this.innerHTML;
//Eliminar el formulario emergente
documento.body.removeChild(alertDiv);
documento.body.removeChild(alertDivParent);
};
}
}
};
//Añadir botón al DIV buscado
alertQueryDiv.appendChild(alertQueryBUTTON);
//Crea un botón de borrar
var alertClearBUTTON = document.createElement("entrada");
alertClearBUTTON.id = "alertClearBUTTON";
alertClearBUTTON.type = "botón";
alertClearBUTTON.value = "Borrar";
alertClearBUTTON.onclick = función(){
//Asignamos un valor nulo al cuadro de texto
obj.valor = "";
//Eliminar el formulario emergente
documento.body.removeChild(alertDiv);
documento.body.removeChild(alertDivParent);
};
//Añadir botón al DIV buscado
alertQueryDiv.appendChild(alertClearBUTTON);
//Crear un botón de cierre
var alertCancelBUTTON = document.createElement("entrada");
alertCancelBUTTON.id = "alertCancelBUTTON";
alertCancelBUTTON.type = "botón";
alertCancelBUTTON.value = "Cerrar";
alertCancelBUTTON.onclick = función(){
//Eliminar el formulario emergente
documento.body.removeChild(alertDiv);
documento.body.removeChild(alertDivParent);
};
//Añadir botón al DIV buscado
alertQueryDiv.appendChild(alertCancelBUTTON);
//Crear una tabla para mostrar información
var alertInfoTab = document.createElement("tabla");
alertInfoTab.id = "alertInfoTab";
con(alertInfoTab.style){
margen = 20;
}
//Calcula cuantas celdas se pueden colocar en este ancho
var tdWidthNum = 130;
var tdNum = parseInt(anchoNum / tdWidthNum);
varnum = 0;
for(var i = 0; i < eval(arrName).length; i ++){
encabezado var;
si(i % tdNum == 0){
encabezado = alertInfoTab.createTHead();
encabezado = encabezado.insertRow(núm);
número++;
}
var headerName = encabezado.insertCell(-1);
con (nombre del encabezado.estilo) {
ancho = tdWidthNum;
color = "azul";
cursor = "puntero";
}
//var headerType = encabezado.insertCell(-1);
si(boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + idStr) + ": " + eval(arrName + "[i]." + nameStr)));
si no (!boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + nameStr)));
//headerType.appendChild(document.createTextNode("Tipo"));
headerName.onclick = función(){
si(booleano)
obj.valor = obj.valor + this.innerHTML + ";";
si no (!bool)
obj.value = this.innerHTML;
//Eliminar el formulario emergente
documento.cuerpo.removeChild(alertDiv);
documento.body.removeChild(alertDivParent);
};
}
//Agregar tabla al DIV que muestra información
alertDiv.appendChild(alertInfoTab);
}
</script>