利用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:表示追加false:表示重新賦值 * boolSet: true:ID和Name的值都顯示false:只顯示Name的值 * widthNum: 訊息DIV的寬度 * heightNum: 訊息DIV的高度 * arrName: 陣列名稱 */ 函數alertDivINFO(obj, idStr, nameStr, bool, boolSet, widthNum, heightNum, arrName){ obj.blur(); Nif( ){ widthNum = 600; } if(!heightNum){ heightNum = 350; } /Pariv. createElement("div"); alertDivParent.id = "alertDivParent"; with(alertDivParent.style){ 頂部= 0; 左= 0; 頂部= 0; 左= 0; 背景= "#EEEEEE"; 過濾器 = "alpha(opacity=70)"; 不透明度= 0.7; 寬度= Math.max(document.body.cliclientWidth, document .body .scrollWidth); height = Math.max(document.body.clientHeight, document.body.scrollHeight); } document.body.appendChild(alertDivParent); document.body.appendChild(alertDivParent);小尺寸DIV varalertDiv = document.createElement("div"); alertDiv.id = "alertDiv"; with(alertDiv.style){ width = widthNum; heightNum ; 位置= "絕對"; 背景= "#DDDDDD"; 左= (Math.max(document.body.clientWidth, document.body.scrollWidth) - widument.body.clientWidth, document.body.scrollWidth) - widthNum) / 22; 🎜 > top = (Math.max(document.body.clientHeight, document.body.scrollHeight) - heightNum) / 2; } //新增至表格 document.body.D. ;

//建立搜尋的DIV varalertQueryDiv = document.createElement("div"); alertQueryDiv.id = "alertQueryDiv"; alertQueryDiv.id = "alertQueryDiv"; alertQueryDiv.id = "alertQueryDiv"; alertQueryDiv.id = "alertQueryDiv"; alertQueryDiv.id = "alertQueryDiv"; alertQueryDiv。 DIV alertDiv.appendChild(alertQueryDiv);

alertQueryDiv.innerHTML = "搜尋 文字名稱createElement(" input" ); alertQueryINPUT.id = "alertQueryINPUT"; alertQueryINPUT.type = "text"; > //建立搜尋按鈕 varalertQueryBUTTON = document.createElement("input"); alertQueryBUTTON.id = "alertQueryBUTTON" alertQueryBUTTON.id = "alertQueryBUTTON" alertQueryBUTTON.id = "alertQueryBUTTON" alertQueryBUTTON.id = "alertQueryBUTTON" alertQueryBUTTON.id = "alertQueryBUTTON" alertQueryBUTTON.id = "alertQueryBUTTON"; ue = " 搜尋"; // 為按鈕新增事件 alertQueryBUTTON.onclick = function(){ // 計算該寬度可放入多少單元格 var tdWidthNum = 計算該寬度可放多少單元格 var tdWidthNum = 計算該寬度tdNum = parseInt(widthNum / tdWidthNum); var num = 0; var j = 0; ); //清空THead的資訊 alertInfoTab.deleteTHead(); // 循環吞吐量 for(var i = 0;我 //如果與記憶體中的一致性就加到TABLE if(eval(arrName "[i]." nameStr).indexOf(alertQueryINPUT.value) >= 0){ var headerQueryINPUT.value) >= 0){ var header ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;;; if(j % tdNum == 0){ header = alertInfoTab.createTHead(); header = header.insert 🎜> var headerName = header.insertCell(-1); with(headerName.style){ width = tdWidthNum; if(boolSet) headerName.appendChild(document.createTextNode(eval(arrName "[i]." idStr) ": " eval(arrName "[i]." nameStr5) ); headerName.appendChild(document.createTextNode(eval(arrName "[i]." nameStr))); headerName.onclick = function()(n 🎜> obj.value = obj.value this.innerHTML ";"; else if(!bool) document. body.removeChild(alertDiv); document.body.removeChild(alertDivParent); }; } } }; //將按鈕加入搜尋的DIV alertQueryDiv.appendChild BUTTON = document. createElement("input"); alertClearBUTTON.id = "alertClearBUTTON"; alertClearBUTTON.type = "button"; alertClearBUTTON.value = " 清空"; alertClearBUTTON.onclick = function() { //將文字方塊賦空值 obj.value = ""; //移除彈出的視窗 document.body.removeChildld(alertDiv); body.removeChild(alertDivParent); }; //將按鈕新增至搜尋的DIV alertQueryDiv.appendChild(alertClearBUTTON); alertCancelBUTTON.id = "alertCancelBUTTON"; alertCancelBUTTON.type = "button"; alertCancelBUTTON.value = " 關閉"; alertCancelBUTTON.onclick = function(){ //移除彈出的窗體 document.body.removeChild(alertDiv); document.body.removeChild(alertDivParent); ent.body.removeChild 按鈕加入搜尋的DIV alertQueryDiv.appendChild(alertCancelBUTTON);

//建立顯示訊息的Table var alertInfoTab = document.createElement("table"); = "alertInfoTab"; with(alertInfoTab.style){ margin = 20; }

//計算寬度可放多少單元格 var = 130Numd; var tdNum = parseInt(widthNum / tdWidthNum); var num = 0; for(var i = 0; i if(i % tdNum == 0){ header = alertInfoTab.createTHead(); header = header.insertRow(num); header = header.insertRow(num); header = header.insertRow(num); header = header.insertRow(num); header = header.insertRow(num); with(headerName.style){ width = tdWidthNum; color = "blue"; point cursor = " cursor> //var headerType = header.insertCell(-1); if(boolSet) headerName.appendChild(document.createTextNode(eval(arrName "[i]." idStr) ": " eval(arrName "[ival(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 = obj.value 1]; else if(!bool) obj.value = this.innerHTML; //移除彈出的視窗 document.body.remove //移除彈出的窗體 . removeChild(alertDivParent); }; } //將table加入顯示訊息的DIV alertDiv.appendChild(alertInfoTab); >