JavaScript를 사용하여 입력 box_javascript 기술을 클릭하여 팝업 양식 선택 정보 구현

여기서 소스코드를 제시합니다. 스타일 처리는 없지만 기능은 괜찮습니다. 모두가 저와 소통할 수 있었으면 좋겠습니다!

코드 복사 코드는 다음과 같습니다.

 
 
    
    
    
 

 
 
 

 

 //数组信息
 var arrs = new Array();
 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 배열의 id 키 이름
* nameStr: json 배열의 name 키 이름
* 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(!widthNum ){
  widthNum = 600;
 }
 if(!heightNum){
  heightNum = 350;
 }
 //创建大的DIV
 var AlertDivParent = document. createElement("div");
 alertDivParent.id = "alertDivParent";
 with(alertDivParent.style){
  상단 = 0;
  왼쪽 = 0;
  위치 = "절대" ;
  배경 = "#EEEEEE";
  필터  = "alpha(opacity=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";
 with(alertDiv.style){
  width = widthNum;
  height = heightNum ;
  위치 = "절대";
  배경 = "#DDDDDD";
  왼쪽  = (Math.max(document.body.clientWidth, document.body.scrollWidth) - widthNum) / 2;
  상단  = (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 = "搜索   name称：";

    //创建文本框
    var AlertQueryINPUT = document.create 요소(" input");
    AlertQueryINPUT.id = "alertQueryINPUT";
    AlertQueryINPUT.type = "text";
    //将文本框添加到搜索的DIV
    AlertQueryDiv.appendChild(alertQueryINPUT);

    //创建搜索按钮
    var AlertQueryBUTTON = document.createElement("input");
 alertQueryBUTTON.id = "alertQueryBUTTON";
    AlertQueryBUTTON.type = "button";
AlertQueryBUTTON.value = " 搜 索 ";
    //给按钮添加事件
    AlertQueryBUTTON.onclick = function(){
  //计算该宽德可放多少单元格
  var tdWidth 숫자 = 130;
  var tdNum = parseInt(widthNum / tdWidthNum);
     var num = 0;
     var j = 0;
     //获取显示信息table
  var warningInfoTab = document.getElementById( " AlertInfoTab");
  //清공THead적信息
  AlertInfoTab.deleteTHead();
     //循环数组
  for(var i = 0; 나는    //如果与数组中的상상就添加到TABLE
      if(eval(arrName "[i]." nameStr).indexOf(alertQueryINPUT.value) >= 0){
var header;
    if(j % ​​tdNum == 0){
     header = AlertInfoTab.createTHead();
     header = header.insertRow(num);
     num ;
    }
    j ;
    var headerName = header.insertCell(-1);
    with(headerName.style){
     width = tdWidthNum;
     color = "blue";
     커서 = "포인터 ";
    }
    if(boolSet)
     headerName.appendChild(document.createTextNode(eval(arrName "[i]." idStr) ": " eval(arrName "[i]." nameStr)) );
    else if(!boolSet)
     headerName.appendChild(document.createTextNode(eval(arrName "[i]." nameStr)));
    headerName.onclick = function(){
if(bool)
      obj.value = obj.value this.innerHTML ";";
     else if(!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="clear";
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 = function(){
//팝업 양식 제거
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
};
//검색된 DIV에 추가된 버튼 제거
AlertQueryDiv.appendChild(alertCancelBUTTON);

//정보를 표시하는 테이블 생성
var AlertInfoTab = document.createElement("table");
AlertInfoTab.id = "alertInfoTab";
with(alertInfoTab.style){
margin = 20;
}

//이 너비에 몇 개의 셀을 배치할 수 있는지 계산
var tdWidthNum = 130;
var tdNum =parseInt(widthNum / tdWidthNum);
var num = 0;
for(var i = 0; i var 헤더;
if(i % tdNum == 0){
header = AlertInfoTab.createTHead();
header = header.insertRow(num);
num ;
}
var headerName = header.insertCell(-1);
with(headerName.style){
width = tdWidthNum;
color = "blue";
커서 = "포인터" ;
}
//var headerType = header.insertCell(-1);
if(boolSet)
headerName.appendChild(document.createTextNode(eval(arrName "[i]." idStr) ": " eval(arrName " [i]." nameStr)));
else 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 ";" ;
else if(!bool)
obj.value = this.innerHTML;
//팝업 양식 제거
document.body.removeChild(alertDiv) ;
document.body .removeChild(alertDivParent);
};
}
//정보를 표시하는 DIV에 테이블 추가
AlertDiv.appendChild(alertInfoTab);
}