これがソースコードです。スタイル処理は行われていませんが、機能は問題ありません。皆さんが私とコミュニケーションできることを願っています。
次のようにコードをコピーします。
<html>
<頭>
<title>クリックすると DIV 選択情報がポップアップ表示されます</title>
<meta http-equiv="キーワード" content="キーワード1,キーワード2,キーワード3">
<meta http-equiv="description" content="これは私のページです">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<本文>
<input type="text" onfocus="alertDivINFO(this, 'id', 'name', true, true, 600, 300, 'arrs')" />
<div style="position:Absolute;"></div>
</body>
</html>
<script type="text/javascript">
//配列情報
var arrs = 新しい配列();
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配列の名前キー
* bool: true: 追加を意味します false: 再割り当てを意味します
* boolSet: true: ID 値と Name 値の両方が表示されます false: Name 値のみが表示されます
* widthNum: 情報 DIV の幅
* heightNum: 情報 DIV の高さ
* arrName: 配列名
*/
functionalertDivINFO(obj, idStr, nameStr, bool, boolSet, widthNum, heightNum, arrName){
obj.blur();
if(!widthNum){
widthNum = 600;
}
if(!身長番号){
高さ番号 = 350;
}
// 大きな DIV を作成する
varalertDivParent = document.createElement("div");
alertDivParent.id = "alertDivParent";
with(alertDivParent.style){
トップ = 0;
左 = 0;
位置 = "絶対";
背景 = "#EEEEEE";
フィルター = "アルファ(不透明度=70)";
不透明度 = 0.7;
width = Math.max(document.body.clientWidth, document.body.scrollWidth);
高さ = Math.max(document.body.clientHeight, document.body.scrollHeight);
}
document.body.appendChild(alertDivParent);
// 小さな DIV を作成します
varalertDiv = document.createElement("div");
アラートDiv.id = "アラートDiv";
with(alertDiv.style){
幅 = 幅番号;
高さ = 高さ番号;
位置 = "絶対";
背景 = "#DDDDDD";
left = (Math.max(document.body.clientWidth, document.body.scrollWidth) - widthNum) / 2;
トップ = (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("入力");
alertQueryINPUT.id = "alertQueryINPUT";
alertQueryINPUT.type = "テキスト";
//検索されたDIVにテキストボックスを追加します
alertQueryDiv.appendChild(alertQueryINPUT);
//検索ボタンを作成
varalertQueryBUTTON = document.createElement("input");
alertQueryBUTTON.id = "alertQueryBUTTON";
alertQueryBUTTON.type = "ボタン";
alertQueryBUTTON.value = "検索";
//ボタンにイベントを追加
alertQueryBUTTON.onclick = function(){
//この幅に何個のセルを配置できるかを計算します
var tdWidthNum = 130;
var tdNum = parseInt(widthNum / tdWidthNum);
varnum = 0;
var j = 0;
//情報を表示するテーブルを取得する
varalertInfoTab = document.getElementById("alertInfoTab");
//THead情報をクリア
alertInfoTab.deleteTHead();
// 配列をループする
for(var i = 0; i < eval(arrName).length; i ++){
// 配列と等しい場合は、TABLE に追加します
if(eval(arrName + "[i]." + nameStr).indexOf(alertQueryINPUT.value) >= 0){
var ヘッダー。
if(j%tdNum == 0){
ヘッダー =alertInfoTab.createTHead();
ヘッダー = header.insertRow(num);
数値++;
}
j++;
var headerName = header.insertCell(-1);
with(ヘッダー名.スタイル){
幅 = tdWidthNum;
色 = "青";
カーソル = "ポインタ";
}
if(ブールセット)
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(ブール値)
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);
//クリアボタンを作成する
varalertClearBUTTON = document.createElement("input");
alertClearBUTTON.id = "alertClearBUTTON";
alertClearBUTTON.type = "ボタン";
alertClearBUTTON.value = "クリア";
alertClearBUTTON.onclick = function(){
//テキストボックスにnull値を代入する
obj.value = "";
//ポップアップフォームを削除
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
};
//検索したDIVにボタンを追加
alertQueryDiv.appendChild(alertClearBUTTON);
//閉じるボタンを作成する
varalertCancelBUTTON = document.createElement("input");
alertCancelBUTTON.id = "alertCancelBUTTON";
alertCancelBUTTON.type = "ボタン";
alertCancelBUTTON.value = "閉じる";
alertCancelBUTTON.onclick = function(){
// ポップアップフォームを削除します
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
};
//検索したDIVにボタンを追加
alertQueryDiv.appendChild(alertCancelBUTTON);
//情報を表示するテーブルを作成する
varalertInfoTab = document.createElement("テーブル");
alertInfoTab.id = "alertInfoTab";
with(alertInfoTab.style){
マージン = 20;
}
//この幅に何個のセルを配置できるかを計算します
var tdWidthNum = 130;
var tdNum = parseInt(widthNum / tdWidthNum);
varnum = 0;
for(var i = 0; i < eval(arrName).length; i ++){
var ヘッダー。
if(i % tdNum == 0){
ヘッダー =alertInfoTab.createTHead();
ヘッダー = header.insertRow(num);
数値++;
}
var headerName = header.insertCell(-1);
with(ヘッダー名.スタイル){
幅 = tdWidthNum;
色 = "青";
カーソル = "ポインタ";
}
//var headerType = header.insertCell(-1);
if(ブールセット)
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(ブール値)
obj.value = obj.value + this.innerHTML + ";";
else if(!bool)
obj.value = this.innerHTML;
// ポップアップフォームを削除します
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
};
}
//情報を表示するテーブルをDIVに追加します
alertDiv.appendChild(alertInfoTab);
}
</script>