입력 상자를 클릭하여 팝업 양식 선택 정보를 구현하려면 JavaScript를 사용하십시오.

저자：Eve Cole 업데이트 시간：2025-01-18 16:36:01

소스 코드는 다음과 같습니다. 스타일 처리는 수행되지 않았지만 기능은 괜찮습니다. 모두가 저와 소통할 수 있기를 바랍니다!

다음과 같이 코드 코드를 복사합니다.

<html>

<머리>

<title>DIV 선택 정보를 팝업하려면 클릭하세요</title>

</head>

<본문>

</body>

</html>

<스크립트 유형="텍스트/자바스크립트">

//배열 정보

var arrs = 새로운 배열();

arrs.push({id: "1", 이름: "장삼3"});

arrs.push({id:"2", 이름:"lee思3"});

arrs.push({id:"3", name:"심무우 3"});

arrs.push({id:"4", 이름:"저우완송3"});

arrs.push({id: "5", name: "친샤오는 3입니다"});

arrs.push({id:"6", 이름:"王五"});

arrs.push({id:"7", 이름:"도서 3"});

/**

* obj: 텍스트 상자의 개체를 클릭합니다.

* idStr: json 배열의 id 키 이름

* nameStr: json 배열의 이름 키

* bool: true: 추가를 의미합니다. false: 재할당을 의미합니다.

* boolSet: true: ID, Name 값이 모두 표시됨 false: Name 값만 표시됨

* widthNum: 정보 DIV의 너비

* heightNum: 정보 DIV의 높이

* arrName: 배열 이름

함수 AlertDivINFO(obj, idStr, nameStr, bool, boolSet, widthNum, heightNum, arrName){

obj.blur();

if(!너비번호){

너비번호 = 600;

}

if(!heightNum){

높이번호 = 350;

}

//대형 DIV 생성

var AlertDivParent = document.createElement("div");

AlertDivParent.id = "alertDivParent";

with(alertDivParent.style){

상단 = 0;

왼쪽 = 0;

위치 = "절대";

배경 = "#EEEEEE";

필터 = "알파(불투명도=70)";

불투명도 = 0.7;

width = 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";

with(alertDiv.style){

너비 = 너비Num;

높이 = 높이Num;

위치 = "절대";

배경 = "#DDDDDD";

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("input");

AlertQueryINPUT.id = "alertQueryINPUT";

AlertQueryINPUT.type = "텍스트";

//검색된 DIV에 텍스트 상자를 추가합니다.

AlertQueryDiv.appendChild(alertQueryINPUT);

//검색버튼 생성

var AlertQueryBUTTON = document.createElement("input");

AlertQueryBUTTON.id = "alertQueryBUTTON";

AlertQueryBUTTON.type = "버튼";

AlertQueryBUTTON.value = "검색";

//버튼에 이벤트 추가

AlertQueryBUTTON.onclick = 함수(){

//이 너비에 몇 개의 셀을 배치할 수 있는지 계산합니다.

var tdWidthNum = 130;

var tdNum = parsInt(widthNum / tdWidthNum);

바넘 = 0;

var j = 0;

//정보를 표시하는 테이블을 가져옵니다.

var AlertInfoTab = document.getElementById("alertInfoTab");

//THead 정보 지우기

AlertInfoTab.deleteTHead();

//루프 배열

for(var i = 0; i < eval(arrName).length; i ++){

//배열과 같으면 TABLE에 추가

if(eval(arrName + "[i]." + nameStr).indexOf(alertQueryINPUT.value) >= 0){

var 헤더;

if(j % tdNum == 0){

헤더 = AlertInfoTab.createTHead();

헤더 = header.insertRow(num);

숫자++;

}

j++;

var headerName = header.insertCell(-1);

with(headerName.style){

너비 = tdWidthNum;

색상 = "파란색";

커서 = "포인터";

}

if(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("input");

AlertClearBUTTON.id = "alertClearBUTTON";

AlertClearBUTTON.type = "버튼";

AlertClearBUTTON.value = "지우기";

AlertClearBUTTON.onclick = 함수(){

//텍스트 상자에 null 값을 할당합니다.

obj.value = "";

//팝업 양식 제거

document.body.removeChild(alertDiv);

document.body.removeChild(alertDivParent);

};

//검색된 DIV에 버튼 추가

AlertQueryDiv.appendChild(alertClearBUTTON);

//닫기 버튼 생성

var AlertCancelBUTTON = document.createElement("input");

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("table");

AlertInfoTab.id = "alertInfoTab";

with(alertInfoTab.style){

마진 = 20;

}

//이 너비에 몇 개의 셀을 배치할 수 있는지 계산합니다.

var tdWidthNum = 130;

var tdNum = parsInt(widthNum / tdWidthNum);

바넘 = 0;

for(var i = 0; i < eval(arrName).length; i ++){

var 헤더;

if(i % tdNum == 0){

헤더 = AlertInfoTab.createTHead();

헤더 = header.insertRow(num);

숫자++;

}

var headerName = header.insertCell(-1);

with(headerName.style){

너비 = tdWidthNum;

색상 = "파란색";

커서 = "포인터";

}

//var headerType = header.insertCell(-1);

if(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);

}

</script>