여기서 소스코드를 제시합니다. 스타일 처리는 없지만 기능은 괜찮습니다. 모두가 저와 소통할 수 있었으면 좋겠습니다! 코드 복사 코드는 다음과 같습니다. 点击弹出DIV选择信息 </p> <p> //数组信息<br> var arrs = new Array();<br> arrs.push({id:"1", name:"张三3"});<br> arrs.push({id:"2", name:"李四3"});<br> arrs.push({id:"3", name:"申午武3"});<br> arrs.push({id:"4", name:"周琬淞3"});<br> arrs.push({id:"5", name:"覃晓为3"});<br> arrs.push({id:"6", name:"王五"});<br> arrs.push({id:"7", name:"宝典3"});</p> <p>/**<br> * obj: 텍스트 상자의 객체 클릭 <br> * idStr: json 배열의 id 키 이름 <br> * nameStr: json 배열의 name 키 이름 <br> * bool: true: 의미 추가 false: 재할당을 의미 <br> * boolSet: true: ID와 Name 값을 모두 표시 false: Name 값만 표시 <br> * widthNum: 정보 DIV의 너비 <br> * heightNum: 정보의 높이 정보 DIV <br> * arrName: 배열 이름 <br>*/<br>함수 AlertDivINFO(obj, idStr, nameStr, bool, boolSet, widthNum, heightNum, arrName){<br> obj.blur();<br> if(!widthNum ){<br> widthNum = 600;<br> }<br> if(!heightNum){<br> heightNum = 350;<br> }<br> //创建大的DIV<br> var AlertDivParent = document. createElement("div");<br> alertDivParent.id = "alertDivParent";<br> with(alertDivParent.style){<br> 상단 = 0;<br> 왼쪽 = 0;<br> 위치 = "절대" ;<br> 배경 = "#EEEEEE";<br> 필터 = "alpha(opacity=70)";<br> 불투명도 = 0.7;<br> 너비 = Math.max(document.body.clientWidth, document.body .scrollWidth);<br> 높이 = Math.max(document.body.clientHeight, document.body.scrollHeight);<br> }<br> document.body.appendChild(alertDivParent);<br> //创建작은적 DIV<br> var AlertDiv = document.createElement("div");<br> alertDiv.id = "alertDiv";<br> with(alertDiv.style){<br> width = widthNum;<br> height = heightNum ;<br> 위치 = "절대";<br> 배경 = "#DDDDDD";<br> 왼쪽 = (Math.max(document.body.clientWidth, document.body.scrollWidth) - widthNum) / 2;<br> 상단 = (Math.max(document.body.clientHeight, document.body.scrollHeight) - heightNum) / 2;<br> }<br> //添加到窗体<br> document.body.appendChild(alertDiv) ;<br><br> //创建搜索的DIV<br> var AlertQueryDiv = document.createElement("div");<br> alertQueryDiv.id = "alertQueryDiv";<br> //将搜索的DIV添加到信息DIV<br> AlertDiv.appendChild(alertQueryDiv);<br><br> AlertQueryDiv.innerHTML = "搜索 name称：";<br><br> //创建文本框<br> var AlertQueryINPUT = document.create 요소(" input");<br> AlertQueryINPUT.id = "alertQueryINPUT";<br> AlertQueryINPUT.type = "text";<br> //将文本框添加到搜索的DIV<br> AlertQueryDiv.appendChild(alertQueryINPUT);<br><br> //创建搜索按钮<br> var AlertQueryBUTTON = document.createElement("input");<br> alertQueryBUTTON.id = "alertQueryBUTTON";<br> AlertQueryBUTTON.type = "button";<br> AlertQueryBUTTON.value = " 搜 索 ";<br> //给按钮添加事件<br> AlertQueryBUTTON.onclick = function(){<br> //计算该宽德可放多少单元格<br> var tdWidth 숫자 = 130; <br> var tdNum = parseInt(widthNum / tdWidthNum);<br> var num = 0;<br> var j = 0;<br> //获取显示信息table<br> var warningInfoTab = document.getElementById( " AlertInfoTab");<br> //清공THead적信息<br> AlertInfoTab.deleteTHead();<br> //循环数组<br> for(var i = 0; 나는 < 평가(arrName).length; i ){<BR> //如果与数组中的상상就添加到TABLE<BR> if(eval(arrName "[i]." nameStr).indexOf(alertQueryINPUT.value) >= 0){<br> var header;<br> if(j % tdNum == 0){<br> header = AlertInfoTab.createTHead();<br> header = header.insertRow(num);<br> num ;<br> }<br> j ;<br> var headerName = header.insertCell(-1);<br> with(headerName.style){<br> width = tdWidthNum;<br> color = "blue";<br> 커서 = "포인터 ";<br> }<br> if(boolSet)<br> headerName.appendChild(document.createTextNode(eval(arrName "[i]." idStr) ": " eval(arrName "[i]." nameStr)) );<br> else if(!boolSet)<br> headerName.appendChild(document.createTextNode(eval(arrName "[i]." nameStr)));<br> headerName.onclick = function(){<br> if(bool)<br> obj.value = obj.value this.innerHTML ";";<br> else if(!bool)<br> obj.value = this.innerHTML;<br> //추출적窗体<br> document.body.removeChild(alertDiv);<br> document.body.removeChild(alertDivParent);<br> };<br> }<br> }<br> };<br> //검색된 DIV에 버튼 추가<br> AlertQueryDiv.appendChild(alertQueryBUTTON);<br><br> //삭제 버튼 생성<br> var AlertClearBUTTON = document . createElement("input");<br>alertClearBUTTON.id = "alertClearBUTTON";<br>alertClearBUTTON.type="버튼";<br>alertClearBUTTON.value="clear";<br>alertClearBUTTON.onclick = 기능( ) {<br> //텍스트 상자에 null 값 할당<br> obj.value = "";<br> //팝업 양식 제거<br> document.body.removeChild(alertDiv);<br> document.body.removeChild(alertDivParent);<br> };<br> //검색된 DIV에 버튼 추가<br> AlertQueryDiv.appendChild(alertClearBUTTON);<br><br> //닫기 버튼 생성<br> var AlertCancelBUTTON = document.createElement("input");<br> AlertCancelBUTTON.id = "alertCancelBUTTON";<br> AlertCancelBUTTON.type = "버튼";<br> AlertCancelBUTTON.value = "닫기";<br> AlertCancelBUTTON.onclick = function(){<br> //팝업 양식 제거<br> document.body.removeChild(alertDiv);<br> document.body.removeChild(alertDivParent);<br> };<br> //검색된 DIV에 추가된 버튼 제거<br> AlertQueryDiv.appendChild(alertCancelBUTTON);<br><br> //정보를 표시하는 테이블 생성<br> var AlertInfoTab = document.createElement("table");<br> AlertInfoTab.id = "alertInfoTab";<br> with(alertInfoTab.style){<br> margin = 20;<br> }<br><br> //이 너비에 몇 개의 셀을 배치할 수 있는지 계산<br> var tdWidthNum = 130; <br> var tdNum =parseInt(widthNum / tdWidthNum);<br> var num = 0;<br> for(var i = 0; i < eval(arrName).length; i ) {<BR> var 헤더; <BR> if(i % tdNum == 0){<BR> header = AlertInfoTab.createTHead();<BR> header = header.insertRow(num);<BR> num ;<BR> }<BR> var headerName = header.insertCell(-1);<BR> with(headerName.style){<BR> width = tdWidthNum;<BR> color = "blue";<BR> 커서 = "포인터" ;<BR> }<BR> //var headerType = header.insertCell(-1);<BR> if(boolSet)<BR> headerName.appendChild(document.createTextNode(eval(arrName "[i]." idStr) ": " eval(arrName " [i]." nameStr)));<BR> else if(!boolSet)<BR> headerName.appendChild(document.createTextNode(eval(arrName "[i]." nameStr))) ;<BR> //headerType .appendChild(document.createTextNode("Type"));<br><br> headerName.onclick = function(){<BR> if(bool)<BR> obj.value = obj. value this.innerHTML ";" ;<BR> else if(!bool)<BR> obj.value = this.innerHTML;<BR> //팝업 양식 제거<BR> document.body.removeChild(alertDiv) ;<BR> document.body .removeChild(alertDivParent);<BR> };<BR> }<BR> //정보를 표시하는 DIV에 테이블 추가<BR> AlertDiv.appendChild(alertInfoTab);<BR>}<BR>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
