JavaScript を使用して、入力ボックスをクリックしてポップアップフォームの選択情報を実現する_javascript スキル

ここではソースコードを提示します。スタイル処理はありませんが、機能は問題ありません。皆さんと交流していただければ幸いです。

コードをコピー コードは次のとおりです: 点击弹出DIV选择信息

//数组信息 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: を意味しますappending false: 再割り当てを意味します * boolSet: true: ID 値と Name 値の両方が表示されます false: Name 値のみが表示されます * widthNum: 情報 DIV の幅 * heightNum: 情報 DIV の高さ情報 DIV * arrName: 配列名 */ functionalertDivINFO(obj, idStr, nameStr, bool, boolSet, widthNum, heightNum, arrName){ obj.blur(); if(!widthNum ){ widthNum = 600; } if(!heightNum){ heightNum = 350; } //创建大的DIV varalertDivParent = document. createElement("div"); alertDivParent.id = "alertDivParent"; with(alertDivParent.style){ top = 0; left = 0; position = "absolute" ; 背景 = "#EEEEEE"; フィルター = "alpha(opacity=70)"; 不透明度 = 0.7; 幅 = Math.max(document.body.clientWidth, document.body .scrollWidth); height = Math.max(document.body.clientHeight, document.body.scrollHeight); } document.body.appendChild(alertDivParent); //创建小的DIV varalertDiv = document.createElement("div"); alertDiv.id = "alertDiv"; with(alertDiv.style){ width = widthNum; height = heightNum ; position = "absolute"; background = "#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 varalertQueryDiv = document.createElement("div"); alertQueryDiv.id = "alertQueryDiv"; //検索対象の DIV を追加します情報DIV alertDiv.appendChild(alertQueryDiv);

alertQueryDiv.innerHTML = "搜検索 名前：";

//创建文本框 varalertQueryINPUT = document.createElement(" input"); alertQueryINPUT.id = "alertQueryINPUT"; alertQueryINPUT.type = "text"; // 検索対象 DIV に本文本框を追加 alertQueryDiv.appendChild(alertQueryINPUT);

//创建搜索按钮 varalertQueryBUTTON = document.createElement("input"); alertQueryBUTTON.id = "alertQueryBUTTON"; alertQueryBUTTON.type = "button"; alertQueryBUTTON.value = " 搜 索 "; //给按钮追加イベント alertQueryBUTTON.onclick = function(){ //计算该宽度可放量单元格 var tdWidthNum = 130; var tdNum = parseInt(widthNum / tdWidthNum); var num = 0; var j = 0; //获取表示情報のTable varalertInfoTab = document.getElementById(" alertInfoTab"); //清空THeadの情報 alertInfoTab.deleteTHead(); //循環数组 for(var i = 0;私は＜ eval(arrName).length; i ){ //結果が数組の中の同等のものを 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 = "青"; カーソル = "ポインター"; } 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 warningClearBUTTON = document .createElement("input"); alertClearBUTTON.id = "alertClearBUTTON"; alertClearBUTTON.type = "button"; alertClearBUTTON.value = "clear"; alertClearBUTTON.onclick = function( ) { //テキスト ボックスに null 値を割り当てます obj.value = ""; //ポップアップ フォームを削除します document.body.removeChild(alertDiv); document.body.removeChild(alertDivParent); }; //検索された DIV にボタンを追加します alterQueryDiv.appendChild(alertClearBUTTON);

//閉じるボタンを作成します varalertCancelBUTTON = document.createElement("input"); alertCancelBUTTON.id = "alertCancelBUTTON"; alertCancelBUTTON.type = "button"; alertCancelBUTTON.value = "閉じる"; alertCancelBUTTON.onclick = function(){ //ポップアップフォームを削除します document.body.removeChild(alertDiv); document.body.removeChild(alertDivParent); }; //検索された DIV に追加されたボタンを削除します alertQueryDiv.appendChild(alertCancelBUTTON);

//情報を表示するテーブルを作成します varalertInfoTab = 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){ ヘッダー =alertInfoTab.createTHead(); ヘッダー = header.insertRow(num); num ; } var headerName = header.insertCell(-1); with(headerName.style){ width = tdWidthNum; color = "青"; カーソル = "ポインター" ; } //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 に追加 alterDiv.appendChild(alertInfoTab); }

JavaScript を使用して、入力ボックスをクリックしてポップアップ フォームの選択情報を実現する_javascript スキル

関連記事

JavaScript を使用して、入力ボックスをクリックしてポップアップフォームの選択情報を実現する_javascript スキル