استخدم جافا سكريبت للحصول على معلومات اختيار النموذج المنبثق من خلال النقر على مربع الإدخال

هذا هو كود المصدر، لم تتم معالجة النمط، لكن الوظيفة على ما يرام، وآمل أن يتمكن الجميع من التواصل معي!

انسخ رمز الكود كما يلي:

<أتش تي أم أل>

<الرأس>

<title>انقر لتنبثق معلومات تحديد DIV</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="هذه صفحتي">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

</الرأس>

<الجسم>

<input type="text" onfocus="alertDivINFO(this, 'id', 'name', true, true, 600, 300, 'arrs')" />

<div style="position:طلقة;"></div>

</الجسم>

</html>

<نوع البرنامج النصي = "نص/جافا سكريبت">

// معلومات المصفوفة

var arrs = new Array();

arrs.push({id: "1"، name: "Zhang San 3"});

arrs.push({المعرف:"2"، الاسم:"李思3"});

arrs.push({id:"3", name:"Shen Wuwu 3"});

arrs.push({id:"4", name:"Zhou Wansong3"});

arrs.push({id: "5"، name: "Qin Xiao is 3"});

arrs.push({id:"6", name:"王五"});

arrs.push({المعرف:"7"، الاسم:"الكتاب 3"});

/**

* obj: انقر فوق كائن مربع النص

* idStr: اسم مفتاح المعرف لصفيف json

* nameStr: مفتاح اسم مصفوفة json

* منطقي: صحيح: يعني إلحاق خطأ: يعني إعادة التعيين

* boolSet: صحيح: يتم عرض قيم المعرف والاسم بشكل خاطئ: يتم عرض قيمة الاسم فقط

* widthNum: عرض المعلومات DIV

* heightNum: ارتفاع DIV المعلومات

* arrName: اسم المصفوفة

*/

دالة تنبيهDivINFO(obj, idStr, nameStr, bool, boolSet, widthNum, heightNum, arrName){

obj.blur();

إذا (!widthNum){

widthNum = 600;

}

إذا (!الارتفاع){

عدد الارتفاع = 350؛

}

// إنشاء DIV كبير

var تنبيهDivParent = document.createElement("div");

تنبيهDivParent.id = "alertDivParent";

مع (alertDivParent.style){

أعلى = 0؛

اليسار = 0؛

الموقف = "المطلق"؛

الخلفية = "#EEEEEE";

مرشح = "ألفا (التعتيم = 70)"؛

العتامة = 0.7؛

width = Math.max(document.body.clientWidth, document.body.scrollWidth);

height = Math.max(document.body.clientHeight, document.body.scrollHeight);

}

document.body.appendChild(alertDivParent);

// إنشاء DIV صغير

var تنبيهDiv = document.createElement("div");

تنبيهDiv.id = "alertDiv";

مع (alertDiv.style){

width = widthNum;

height = heightNum;

الموقف = "المطلق"؛

الخلفية = "#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

var تنبيهQueryDiv = document.createElement("div");

تنبيهQueryDiv.id = "alertQueryDiv";

// أضف DIV الذي تم البحث عنه إلى المعلومات DIV

تنبيهDiv.appendChild(alertQueryDiv);

تنبيهQueryDiv.innerHTML = "اسم البحث:";

// إنشاء مربع نص

var تنبيهQueryINPUT = document.createElement("input");

تنبيهQueryINPUT.id = "alertQueryINPUT";

تنبيهQueryINPUT.type = "نص";

// أضف مربع نص إلى DIV الذي تم البحث عنه

تنبيهQueryDiv.appendChild(alertQueryINPUT);

// إنشاء زر البحث

var تنبيهQueryBUTTON = document.createElement("input");

تنبيهQueryBUTTON.id = "alertQueryBUTTON";

تنبيهQueryBUTTON.type = "زر";

تنبيهQueryBUTTON.value = "بحث";

// أضف حدثًا إلى الزر

تنبيهQueryBUTTON.onclick = وظيفة () {

// احسب عدد الخلايا التي يمكن وضعها بهذا العرض

فار tdWidthNum = 130;

var tdNum = parseInt(widthNum / tdWidthNum);

فارنوم = 0;

فار ي = 0;

// احصل على الجدول الذي يعرض المعلومات

var تنبيهInfoTab = document.getElementById("alertInfoTab");

// مسح معلومات الرأس

تنبيهInfoTab.deleteTHead();

// مصفوفة حلقة

for(var i = 0; i < eval(arrName).length; i ++){

// إذا كان يساوي المصفوفة، أضفه إلى TABLE

إذا (eval(arrName + "[i]." + nameStr).indexOf(alertQueryINPUT.value) >= 0){

رأس فار؛

إذا (ي % ​​tdNum == 0){

header =alertInfoTab.createTHead();

header = header.insertRow(num);

رقم++;

}

ي++;

var headerName = header.insertCell(-1);

مع (headerName.style) {

width = tdWidthNum;

اللون = "الأزرق"؛

المؤشر = "المؤشر"؛

}

إذا (مجموعة منطقية)

headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + idStr) + ": " + eval(arrName + "[i]." + nameStr)));

وإلا إذا (!boolSet)

headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + nameStr)));

headerName.onclick = function(){

إذا (منطقي)

obj.value = obj.value + this.innerHTML + ";";

وإلا إذا (!بول)

obj.value = this.innerHTML;

// قم بإزالة النموذج المنبثق

document.body.removeChild(alertDiv);

document.body.removeChild(alertDivParent);

};

}

}

};

// إضافة زر إلى DIV الذي تم البحث فيه

تنبيهQueryDiv.appendChild(alertQueryBUTTON);

// أنشئ زرًا واضحًا

var تنبيهClearBUTTON = document.createElement("input");

تنبيهClearBUTTON.id = "alertClearBUTTON";

تنبيهClearBUTTON.type = "زر";

تنبيهClearBUTTON.value = "مسح";

تنبيهClearBUTTON.onclick = function(){

// قم بتعيين قيمة فارغة لمربع النص

obj.value = "";

// قم بإزالة النموذج المنبثق

document.body.removeChild(alertDiv);

document.body.removeChild(alertDivParent);

};

// إضافة زر إلى DIV الذي تم البحث فيه

تنبيهQueryDiv.appendChild(alertClearBUTTON);

// أنشئ زر إغلاق

var تنبيهCancelBUTTON = document.createElement("input");

تنبيهCancelBUTTON.id = "alertCancelBUTTON";

تنبيهCancelBUTTON.type = "زر";

تنبيهCancelBUTTON.value = "إغلاق"؛

تنبيهCancelBUTTON.onclick = function(){

// قم بإزالة النموذج المنبثق

document.body.removeChild(alertDiv);

document.body.removeChild(alertDivParent);

};

// إضافة زر إلى DIV الذي تم البحث فيه

تنبيهQueryDiv.appendChild(alertCancelBUTTON);

// أنشئ جدولًا لعرض المعلومات

var تنبيهInfoTab = document.createElement("table");

تنبيهInfoTab.id = "alertInfoTab";

مع(alertInfoTab.style){

الهامش = 20؛

}

// احسب عدد الخلايا التي يمكن وضعها بهذا العرض

فار tdWidthNum = 130;

var tdNum = parseInt(widthNum / tdWidthNum);

فارنوم = 0;

for(var i = 0; i < eval(arrName).length; i ++){

رأس فار؛

إذا (i٪ tdNum == 0){

header =alertInfoTab.createTHead();

header = header.insertRow(num);

رقم++;

}

var headerName = header.insertCell(-1);

مع (headerName.style) {

width = tdWidthNum;

اللون = "الأزرق"؛

المؤشر = "المؤشر"؛

}

//var headerType = header.insertCell(-1);

إذا (مجموعة منطقية)

headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + idStr) + ": " + eval(arrName + "[i]." + nameStr)));

وإلا إذا (!boolSet)

headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + nameStr)));

//headerType.appendChild(document.createTextNode("Type"));

headerName.onclick = function(){

إذا (منطقي)

obj.value = obj.value + this.innerHTML + ";";

وإلا إذا (!بول)

obj.value = this.innerHTML;

// قم بإزالة النموذج المنبثق

document.body.removeChild(alertDiv);

document.body.removeChild(alertDivParent);

};

}

// أضف جدولًا إلى DIV الذي يعرض المعلومات

تنبيهDiv.appendChild(alertInfoTab);

}

</script>