ここではソースコードを提示します。スタイル処理はありませんが、機能は問題ありません。皆さんと交流していただければ幸いです。 コードをコピー コードは次のとおりです: 点击弹出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: を意味しますappending false: 再割り当てを意味します <br> * boolSet: true: ID 値と Name 値の両方が表示されます false: Name 値のみが表示されます <br> * widthNum: 情報 DIV の幅 <br> * heightNum: 情報 DIV の高さ情報 DIV <br> * arrName: 配列名 <br>*/<br>functionalertDivINFO(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> varalertDivParent = document. createElement("div");<br> alertDivParent.id = "alertDivParent";<br> with(alertDivParent.style){<br> top = 0;<br> left = 0;<br> position = "absolute" ;<br> 背景 = "#EEEEEE";<br> フィルター = "alpha(opacity=70)";<br> 不透明度 = 0.7;<br> 幅 = Math.max(document.body.clientWidth, document.body .scrollWidth);<br> height = Math.max(document.body.clientHeight, document.body.scrollHeight);<br> }<br> document.body.appendChild(alertDivParent);<br> //创建小的DIV<br> varalertDiv = document.createElement("div");<br> alertDiv.id = "alertDiv";<br> with(alertDiv.style){<br> width = widthNum;<br> height = heightNum ;<br> position = "absolute";<br> background = "#DDDDDD";<br> left = (Math.max(document.body.clientWidth, document.body.scrollWidth) - widthNum) / 2;<br> top = (Math.max(document.body.clientHeight, document.body.scrollHeight) - heightNum) / 2;<br> }<br> //窗体に追加<br> document.body.appendChild(alertDiv) ;<br><br> //検索対象の DIV<br> varalertQueryDiv = document.createElement("div");<br> alertQueryDiv.id = "alertQueryDiv";<br> //検索対象の DIV を追加します情報DIV<br> alertDiv.appendChild(alertQueryDiv);<br><br> alertQueryDiv.innerHTML = "搜検索 名前：";<br><br> //创建文本框<br> varalertQueryINPUT = document.createElement(" input");<br> alertQueryINPUT.id = "alertQueryINPUT";<br> alertQueryINPUT.type = "text";<br> // 検索対象 DIV に本文本框を追加<br> alertQueryDiv.appendChild(alertQueryINPUT);<br><br> //创建搜索按钮<br> varalertQueryBUTTON = document.createElement("input");<br> alertQueryBUTTON.id = "alertQueryBUTTON";<br> alertQueryBUTTON.type = "button";<br> alertQueryBUTTON.value = " 搜 索 ";<br> //给按钮追加イベント<br> alertQueryBUTTON.onclick = function(){<br> //计算该宽度可放量单元格<br> var tdWidthNum = 130; <br> var tdNum = parseInt(widthNum / tdWidthNum);<br> var num = 0;<br> var j = 0;<br> //获取表示情報のTable<br> varalertInfoTab = document.getElementById(" alertInfoTab");<br> //清空THeadの情報<br> alertInfoTab.deleteTHead();<br> //循環数组<br> for(var i = 0;私は＜ eval(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 = "青";<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 warningClearBUTTON = document .createElement("input");<br>alertClearBUTTON.id = "alertClearBUTTON";<br>alertClearBUTTON.type = "button";<br>alertClearBUTTON.value = "clear";<br>alertClearBUTTON.onclick = function( ) {<br> //テキスト ボックスに null 値を割り当てます<br> obj.value = "";<br> //ポップアップ フォームを削除します<br> document.body.removeChild(alertDiv);<br> document.body.removeChild(alertDivParent);<br> };<br> //検索された DIV にボタンを追加します<br> alterQueryDiv.appendChild(alertClearBUTTON);<br><br> //閉じるボタンを作成します<br> varalertCancelBUTTON = document.createElement("input");<br>alertCancelBUTTON.id = "alertCancelBUTTON";<br>alertCancelBUTTON.type = "button";<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> varalertInfoTab = 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 i> var ヘッダー; <br> if(i % tdNum == 0){<br> ヘッダー =alertInfoTab.createTHead();<br> ヘッダー = header.insertRow(num);<br> num ;<br> }<br> var headerName = header.insertCell(-1);<br> with(headerName.style){<br> width = tdWidthNum;<br> color = "青";<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> alterDiv.appendChild(alertInfoTab);<br>}<br>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
