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: を意味します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
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);
}

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocketとJavaScript:リアルタイム監視システムを実現するためのキーテクノロジー はじめに: インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

JavaScript は Web 開発で広く使用されているプログラミング言語であり、WebSocket はリアルタイム通信に使用されるネットワーク プロトコルです。 2 つの強力な機能を組み合わせることで、効率的なリアルタイム画像処理システムを構築できます。この記事では、JavaScript と WebSocket を使用してこのシステムを実装する方法と、具体的なコード例を紹介します。まず、リアルタイム画像処理システムの要件と目標を明確にする必要があります。リアルタイムの画像データを収集できるカメラ デバイスがあるとします。
