Вот исходный код, обработка стилей не проводилась, но с функцией все в порядке, надеюсь, каждый сможет со мной связаться!
Скопируйте код кода следующим образом:
<html>
<голова>
<title>Нажмите, чтобы отобразить информацию о выборе DIV</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="это моя страница">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</голова>
<тело>
<input type="text" onfocus="alertDivINFO(this, 'id', 'name', true, true, 600, 300, 'arrs')" />
<div style="position: Absolute;"></div>
</тело>
</html>
<тип сценария="текст/javascript">
//информация о массиве
вар arrs = новый массив ();
arrs.push({id: "1", name: "Чжан Сан 3"});
arrs.push({id:"2", name:"李思3"});
arrs.push({id:"3", name:"Шэнь Уву 3"});
arrs.push({id:"4", name:"Чжоу Ваньсонг3"});
arrs.push({id: "5", name: "Цинь Сяо — 3"});
arrs.push({id:"6", name:"王五"});
arrs.push({id:"7", name:"Книга 3"});
/**
* obj: щелкните объект текстового поля.
* idStr: имя ключа идентификатора массива json.
* nameStr: ключ имени массива json.
* bool: true: означает добавление false: означает переназначение
* boolSet: true: отображаются значения идентификатора и имени false: отображается только значение имени
* widthNum: ширина информационного DIV
* heightNum: высота информационного DIV.
* arrName: имя массива
*/
function alertDivINFO(obj, idStr, nameStr, bool, boolSet, widthNum, heightNum, arrName){
объект.блур();
если(!widthNum){
ширинаNum = 600;
}
если(!heightNum){
высотаNum = 350;
}
//Создаем большой DIV
var alertDivParent = document.createElement("div");
alertDivParent.id = "alertDivParent";
с (alertDivParent.style) {
верх = 0;
слева = 0;
позиция = "абсолют";
фон = "#EEEEEE";
фильтр = "альфа (непрозрачность = 70)";
непрозрачность = 0,7;
ширина = Math.max(document.body.clientWidth, document.body.scrollWidth);
высота = Math.max(document.body.clientHeight, document.body.scrollHeight);
}
document.body.appendChild(alertDivParent);
//Создаем небольшой DIV
var alertDiv = document.createElement("div");
alertDiv.id = "alertDiv";
с (alertDiv.style) {
ширина = ширинаNum;
высота = высотаNum;
позиция = "абсолют";
фон = "#ДДДДДД";
left = (Math.max(document.body.clientWidth, document.body.scrollWidth) - widthNum) / 2;
top = (Math.max(document.body.clientHeight, document.body.scrollHeight) - heightNum) / 2;
}
//Добавляем в форму
document.body.appendChild(alertDiv);
//Создаем поиск DIV
var alertQueryDiv = document.createElement("div");
alertQueryDiv.id = "alertQueryDiv";
//Добавляем искомый DIV в информационный DIV
alertDiv.appendChild(alertQueryDiv);
alertQueryDiv.innerHTML = "Имя поиска:";
//Создаем текстовое поле
var alertQueryINPUT = document.createElement("вход");
alertQueryINPUT.id = "alertQueryINPUT";
alertQueryINPUT.type = "текст";
//Добавляем текстовое поле в искомый DIV
alertQueryDiv.appendChild(alertQueryINPUT);
//Создаем кнопку поиска
var alertQueryBUTTON = document.createElement("вход");
alertQueryBUTTON.id = "alertQueryBUTTON";
alertQueryBUTTON.type = "кнопка";
alertQueryBUTTON.value = "Поиск";
//Добавляем событие на кнопку
alertQueryBUTTON.onclick = функция(){
//Рассчитываем, сколько ячеек можно разместить по этой ширине
вар tdWidthNum = 130;
вар tdNum = parseInt (widthNum / tdWidthNum);
варнум = 0;
вар j = 0;
//Получаем таблицу, отображающую информацию
var alertInfoTab = document.getElementById("alertInfoTab");
//Очистить информацию о THead
alertInfoTab.deleteTHead();
//массив цикла
for(var i = 0; я <eval(arrName).length; я ++){
//Если массив равен, добавляем его в TABLE
if(eval(arrName + "[i]." + nameStr).indexOf(alertQueryINPUT.value) >= 0){
вар заголовок;
if(j % tdNum == 0){
заголовок = alertInfoTab.createTHead();
заголовок = header.insertRow(num);
число++;
}
j++;
var headerName = header.insertCell(-1);
с(headerName.style){
ширина = tdWidthNum;
цвет = «синий»;
курсор = «указатель»;
}
если (boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + idStr) + ": " + eval(arrName + "[i]." + nameStr)));
иначе, если(!boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + nameStr)));
headerName.onclick = функция(){
если (логическое значение)
obj.value = obj.value + this.innerHTML + ";";
иначе, если(!bool)
obj.value = this.innerHTML;
//Удалим всплывающую форму
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
};
}
}
};
//Добавить кнопку в найденный DIV
alertQueryDiv.appendChild(alertQueryBUTTON);
//Создаем кнопку очистки
var alertClearBUTTON = document.createElement("вход");
alertClearBUTTON.id = "alertClearBUTTON";
alertClearBUTTON.type = "кнопка";
alertClearBUTTON.value = "Очистить";
alertClearBUTTON.onclick = функция(){
//Назначаем нулевое значение текстовому полю
объект.значение = "";
//Удалим всплывающую форму
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
};
//Добавить кнопку в найденный DIV
alertQueryDiv.appendChild(alertClearBUTTON);
//Создаем кнопку закрытия
var alertCancelBUTTON = document.createElement("вход");
alertCancelBUTTON.id = "alertCancelBUTTON";
alertCancelBUTTON.type = "кнопка";
alertCancelBUTTON.value = "Закрыть";
alertCancelBUTTON.onclick = функция(){
//Удалим всплывающую форму
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
};
//Добавляем кнопку в найденный DIV
alertQueryDiv.appendChild(alertCancelBUTTON);
//Создаем таблицу для отображения информации
var alertInfoTab = document.createElement("таблица");
alertInfoTab.id = "alertInfoTab";
с (alertInfoTab.style) {
маржа = 20;
}
//Рассчитываем, сколько ячеек можно разместить по этой ширине
вар tdWidthNum = 130;
вар tdNum = parseInt (widthNum / tdWidthNum);
варнум = 0;
for(var i = 0; я <eval(arrName).length; я ++){
вар заголовок;
если (я % tdNum == 0) {
заголовок = alertInfoTab.createTHead();
заголовок = header.insertRow(num);
число++;
}
var headerName = header.insertCell(-1);
с(headerName.style){
ширина = tdWidthNum;
цвет = «синий»;
курсор = «указатель»;
}
//var headerType = header.insertCell(-1);
если (boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + idStr) + ": " + eval(arrName + "[i]." + nameStr)));
иначе, если(!boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + nameStr)));
//headerType.appendChild(document.createTextNode("Тип"));
headerName.onclick = функция(){
если (логическое значение)
obj.value = obj.value + this.innerHTML + ";";
иначе, если(!bool)
obj.value = this.innerHTML;
//Удалим всплывающую форму
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
};
}
//Добавляем таблицу в DIV, которая отображает информацию
alertDiv.appendChild(alertInfoTab);
}
</скрипт>