利用javaScript實(shí)現(xiàn)點(diǎn)擊輸入框彈出窗體選擇信息
在這里奉上源代碼，沒有做樣式處理，不過功能是可以的，希望大家可以和我交流交流！
<html>
<head>
<title>點(diǎn)擊彈出DIV選擇信息</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="text" onfocus="alertDivINFO(this, 'id', 'name', true, true, 600, 300, 'arrs')" />
<div style="position: absolute;"></div>
</body>
</html>
<script type="text/javascript">
//數(shù)組信息
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: 點(diǎn)擊文本框的對(duì)象
* idStr: json數(shù)組的id鍵名
* nameStr: json數(shù)組的name鍵名
* bool: true:表示追加 false:表示重新賦值
* boolSet: true:ID和Name的值都顯示 false:只顯示Name的值
* widthNum: 信息DIV的寬度
* heightNum: 信息DIV的高度
* arrName: 數(shù)組名稱
*/
function alertDivINFO(obj, idStr, nameStr, bool, boolSet, widthNum, heightNum, arrName){
obj.blur();
if(!widthNum){
widthNum = 600;
}
if(!heightNum){
heightNum = 350;
}
//創(chuàng)建大的DIV
var alertDivParent = document.createElement("div");
alertDivParent.id = "alertDivParent";
with(alertDivParent.style){
top = 0;
left = 0;
position = "absolute";
background = "#EEEEEE";
filter = "alpha(opacity=70)";
opacity = 0.7;
width = Math.max(document.body.clientWidth, document.body.scrollWidth);
height = Math.max(document.body.clientHeight, document.body.scrollHeight);
}
document.body.appendChild(alertDivParent);
//創(chuàng)建小的DIV
var alertDiv = 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);
//創(chuàng)建搜索的DIV
var alertQueryDiv = document.createElement("div");
alertQueryDiv.id = "alertQueryDiv";
//將搜索的DIV添加到信息DIV
alertDiv.appendChild(alertQueryDiv);
alertQueryDiv.innerHTML = "搜索 名稱：";
//創(chuàng)建文本框
var alertQueryINPUT = document.createElement("input");
alertQueryINPUT.id = "alertQueryINPUT";
alertQueryINPUT.type = "text";
//將文本框添加到搜索的DIV
alertQueryDiv.appendChild(alertQueryINPUT);
//創(chuàng)建搜索按鈕
var alertQueryBUTTON = document.createElement("input");
alertQueryBUTTON.id = "alertQueryBUTTON";
alertQueryBUTTON.type = "button";
alertQueryBUTTON.value = " 搜 索 ";
//給按鈕添加事件
alertQueryBUTTON.onclick = function(){
//計(jì)算該寬度可放多少單元格
var tdWidthNum = 130;
var tdNum = parseInt(widthNum / tdWidthNum);
var num = 0;
var j = 0;
//獲取顯示信息的Table
var alertInfoTab = document.getElementById("alertInfoTab");
//清空THead的信息
alertInfoTab.deleteTHead();
//循環(huán)數(shù)組
for(var i = 0; i < eval(arrName).length; i ++){
//如果與數(shù)組中的相等就添加到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 = "blue";
cursor = "pointer";
}
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);
//創(chuàng)建清空按鈕
var alertClearBUTTON = document.createElement("input");
alertClearBUTTON.id = "alertClearBUTTON";
alertClearBUTTON.type = "button";
alertClearBUTTON.value = " 清 空 ";
alertClearBUTTON.onclick = function(){
//給文本框賦空值
obj.value = "";
//移除彈出的窗體
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
};
//將按鈕添加到搜索的DIV
alertQueryDiv.appendChild(alertClearBUTTON);
//創(chuàng)建關(guān)閉按鈕
var alertCancelBUTTON = document.createElement("input");
alertCancelBUTTON.id = "alertCancelBUTTON";
alertCancelBUTTON.type = "button";
alertCancelBUTTON.value = " 關(guān) 閉 ";
alertCancelBUTTON.onclick = function(){
//移除彈出的窗體
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
};
//將按鈕添加到搜索的DIV
alertQueryDiv.appendChild(alertCancelBUTTON);
//創(chuàng)建顯示信息的Table
var alertInfoTab = document.createElement("table");
alertInfoTab.id = "alertInfoTab";
with(alertInfoTab.style){
margin = 20;
}
//計(jì)算該寬度可放多少單元格
var tdWidthNum = 130;
var tdNum = parseInt(widthNum / tdWidthNum);
var num = 0;
for(var i = 0; i < eval(arrName).length; i ++){
var header;
if(i % tdNum == 0){
header = alertInfoTab.createTHead();
header = header.insertRow(num);
num ++;
}
var headerName = header.insertCell(-1);
with(headerName.style){
width = tdWidthNum;
color = "blue";
cursor = "pointer";
}
//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);
};
}
//將table添加到顯示信息的DIV
alertDiv.appendChild(alertInfoTab);
}
</script>
- javascript用DIV模擬彈出窗口_窗體滾動(dòng)跟隨
- Javascript 兩個(gè)窗體之間傳值實(shí)現(xiàn)代碼
- Javascript showModalDialog兩個(gè)窗體之間傳值
- javascript 通過封裝div方式彈出div窗體
- JavaScript 彈出窗體點(diǎn)擊按鈕返回選擇數(shù)據(jù)的實(shí)現(xiàn)
- javascript 子窗體父窗體相互傳值方法
- 父子窗體間傳遞JSON格式的數(shù)據(jù)的代碼
- js關(guān)閉子窗體刷新父窗體實(shí)現(xiàn)方法
- 鼠標(biāo)拖拽移動(dòng)子窗體的JS實(shí)現(xiàn)
- Ext JS動(dòng)態(tài)加載JavaScript創(chuàng)建窗體的方法
相關(guān)文章
Bootstrap樹形組件jqTree的簡(jiǎn)單封裝
這篇文章主要介紹了Bootstrap樹形組件jqTree的簡(jiǎn)單封裝，封裝一個(gè)稍微完整點(diǎn)的樹形組件，感興趣的小伙伴們可以參考一下2016-01-01
教你使用javascript簡(jiǎn)單寫一個(gè)頁面模板引擎
不知道你有木有聽說過一個(gè)基于Javascript的Web頁面預(yù)處理器，叫做AbsurdJS。只是打算寫一個(gè)CSS的預(yù)處理器，后來擴(kuò)展到了CSS和HTML，可以用來把Javascript代碼轉(zhuǎn)成CSS和HTML代碼。當(dāng)然，由于可以生成HTML代碼，你也可以把它當(dāng)成一個(gè)模板引擎，用于在標(biāo)記語言中填充數(shù)據(jù)。2015-05-05
layer.msg()去掉默認(rèn)時(shí)間,實(shí)現(xiàn)手動(dòng)關(guān)閉的方法
今天小編就為大家分享一篇layer.msg()去掉默認(rèn)時(shí)間,實(shí)現(xiàn)手動(dòng)關(guān)閉的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
如果說道實(shí)現(xiàn)深拷貝最簡(jiǎn)單的方法，我們第一個(gè)想到的就是?JSON.stringify()?方法，因?yàn)镴SON.stringify()后返回的是字符串，所以我們會(huì)再使用JSON.parse()轉(zhuǎn)換為對(duì)象,這篇文章主要介紹了JavaScript?深拷貝的循環(huán)引用問題,需要的朋友可以參考下2022-12-12
JS中使用cavas截圖網(wǎng)頁并解決跨域及模糊問題
這篇文章主要介紹了JS中使用cavas截取網(wǎng)頁并解決跨域以及模糊問題 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
js+css繪制顏色動(dòng)態(tài)變化的圈中圈效果
這篇文章主要介紹了js+css繪制顏色動(dòng)態(tài)變化的圈中圈效果,涉及JavaScript結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01
起點(diǎn)頁面?zhèn)髦礿s,有空研究學(xué)習(xí)下
起點(diǎn)上的頁面?zhèn)髦礿s,有空研究下2010-01-01
JavaScript使用prototype原型實(shí)現(xiàn)的封裝繼承多態(tài)示例
這篇文章主要介紹了JavaScript使用prototype原型實(shí)現(xiàn)的封裝繼承多態(tài),涉及javascript prototype與面向?qū)ο蟪绦蛟O(shè)計(jì)相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
JavaScript的Array對(duì)象有一個(gè)sort方法，用于實(shí)現(xiàn)對(duì)數(shù)組元素的排序，該方法默認(rèn)按照數(shù)組項(xiàng)ASCII 字符順序升序排列。這篇文章重點(diǎn)給大家介紹js模擬實(shí)現(xiàn)Array的sort方法，一起看看吧2007-12-12
基于JS代碼實(shí)現(xiàn)圖片在頁面中旋轉(zhuǎn)效果
這篇文章主要介紹了基于JS代碼實(shí)現(xiàn)圖片在頁面中旋轉(zhuǎn)效果 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06