利用javaScript實作點選輸入框彈出窗體選擇資訊_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();
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);
>