Ini kode sumbernya, tidak ada pemrosesan gaya yang dilakukan, tetapi fungsinya oke, saya harap semua orang dapat berkomunikasi dengan saya!
Copy kode kodenya sebagai berikut:
<html>
<kepala>
<title>Klik untuk memunculkan informasi pemilihan DIV</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="ini halaman saya">
<meta http-equiv="content-type" content="teks/html; charset=UTF-8">
</kepala>
<tubuh>
<input type="text" onfocus="alertDivINFO(ini, 'id', 'nama', benar, benar, 600, 300, 'arrs')" />
<div style="posisi: absolut;"></div>
</tubuh>
</html>
<skrip tipe="teks/javascript">
//informasi susunan
var arrs = Array baru();
arrs.push({id: "1", nama: "Zhang San 3"});
arrs.push({id:"2", nama:"李思3"});
arrs.push({id:"3", nama:"Shen Wuwu 3"});
arrs.push({id:"4", nama:"Zhou Wansong3"});
arrs.push({id: "5", nama: "Qin Xiao berumur 3"});
arrs.push({id:"6", nama:"王五"});
arrs.push({id:"7", nama:"Buku 3"});
/**
* obj: Klik objek kotak teks
* idStr: nama kunci id dari array json
* nameStr: kunci nama array json
* bool: true: berarti menambahkan false: berarti menugaskan ulang
* boolSet: true: nilai ID dan Name ditampilkan false: hanya nilai Name yang ditampilkan
* widthNum: lebar informasi DIV
* heightNum: ketinggian informasi DIV
* arrName: nama array
*/
fungsi alertDivINFO(obj, idStr, nameStr, bool, boolSet, widthNum, heightNum, arrName){
obj.blur();
if(!widthNum){
lebarJumlah = 600;
}
if(!heightNum){
tinggiJumlah = 350;
}
//Buat DIV besar
var alertDivParent = dokumen.createElement("div");
alertDivParent.id = "alertDivParent";
dengan(alertDivParent.style){
atas = 0;
kiri = 0;
posisi = "mutlak";
latar belakang = "#EEEEEE";
filter = "alfa(opasitas=70)";
opacity = 0,7;
lebar = Matematika.max(document.body.clientWidth, document.body.scrollWidth);
tinggi = Matematika.max(document.body.clientHeight, document.body.scrollHeight);
}
dokumen.body.appendChild(alertDivParent);
//Buat DIV kecil
var alertDiv = dokumen.createElement("div");
alertDiv.id = "alertDiv";
dengan(alertDiv.style){
lebar = lebarJumlah;
tinggi = tinggiJumlah;
posisi = "mutlak";
latar belakang = "#DDDDDD";
kiri = (Math.max(document.body.clientWidth, document.body.scrollWidth) - widthNum) / 2;
top = (Math.max(document.body.clientHeight, document.body.scrollHeight) - heightNum) / 2;
}
//Tambahkan ke formulir
dokumen.body.appendChild(alertDiv);
//Buat DIV pencarian
var alertQueryDiv = dokumen.createElement("div");
alertQueryDiv.id = "alertQueryDiv";
//Tambahkan DIV yang dicari ke DIV informasi
alertDiv.appendChild(alertQueryDiv);
alertQueryDiv.innerHTML = "Nama pencarian:";
//Buat kotak teks
var alertQueryINPUT = dokumen.createElement("input");
alertQueryINPUT.id = "alertQueryINPUT";
alertQueryINPUT.type = "teks";
//Tambahkan kotak teks ke DIV yang dicari
alertQueryDiv.appendChild(alertQueryINPUT);
//Buat tombol pencarian
var alertQueryBUTTON = dokumen.createElement("input");
alertQueryBUTTON.id = "alertQueryBUTTON";
alertQueryBUTTON.type = "tombol";
alertQueryBUTTON.value = "Cari";
//Tambahkan acara ke tombol
alertQueryBUTTON.onclick = fungsi(){
//Hitung berapa banyak sel yang dapat ditempatkan dalam lebar ini
var tdWidthNum = 130;
var tdNum = parseInt(widthNum / tdWidthNum);
varnum = 0;
var j = 0;
//Dapatkan Tabel menampilkan informasi
var alertInfoTab = dokumen.getElementById("alertInfoTab");
//Hapus informasi kepala
alertInfoTab.deleteTHead();
//lingkaran larik
untuk(var i = 0; saya < eval(arrName).panjang; saya ++){
//Jika sama dengan array, tambahkan ke TABLE
if(eval(arrName + "[i]." + nameStr).indexOf(alertQueryINPUT.value) >= 0){
var tajuk;
jika(j %tdNum == 0){
header = alertInfoTab.createTHead();
header = header.insertRow(angka);
nomor++;
}
j++;
var headerName = header.insertCell(-1);
dengan(namaheader.gaya){
lebar = tdWidthNum;
warna = "biru";
kursor = "penunjuk";
}
jika(boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + idStr) + ": " + eval(arrName + "[i]." + nameStr)));
lain jika(!boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + nameStr)));
headerName.onclick = fungsi(){
jika (bodoh)
obj.value = obj.value + this.innerHTML + ";";
lain jika(!bool)
obj.nilai = ini.innerHTML;
//Hapus formulir pop-up
dokumen.body.removeChild(alertDiv);
dokumen.body.removeChild(alertDivParent);
};
}
}
};
//Tambahkan tombol ke DIV yang dicari
alertQueryDiv.appendChild(alertQueryBUTTON);
//Buat tombol hapus
var alertClearBUTTON = dokumen.createElement("input");
alertClearBUTTON.id = "alertClearBUTTON";
alertClearBUTTON.type = "tombol";
alertClearBUTTON.value = "Hapus";
alertClearBUTTON.onclick = fungsi(){
//Menetapkan nilai null pada kotak teks
obj.nilai = "";
//Hapus formulir pop-up
dokumen.body.removeChild(alertDiv);
dokumen.body.removeChild(alertDivParent);
};
//Tambahkan tombol ke DIV yang dicari
alertQueryDiv.appendChild(alertClearBUTTON);
//Buat tombol tutup
var alertCancelBUTTON = dokumen.createElement("input");
alertCancelBUTTON.id = "alertCancelBUTTON";
alertCancelBUTTON.type = "tombol";
alertCancelBUTTON.value = "Tutup";
alertCancelBUTTON.onclick = function(){
//Hapus formulir pop-up
dokumen.body.removeChild(alertDiv);
dokumen.body.removeChild(alertDivParent);
};
//Tambahkan tombol ke DIV yang dicari
alertQueryDiv.appendChild(alertCancelBUTTON);
//Buat Tabel untuk menampilkan informasi
var alertInfoTab = document.createElement("tabel");
alertInfoTab.id = "alertInfoTab";
dengan(alertInfoTab.style){
margin = 20;
}
//Hitung berapa banyak sel yang dapat ditempatkan dalam lebar ini
var tdWidthNum = 130;
var tdNum = parseInt(widthNum / tdWidthNum);
varnum = 0;
untuk(var i = 0; saya < eval(arrName).panjang; saya ++){
var tajuk;
jika(i %tdNum == 0){
header = alertInfoTab.createTHead();
header = header.insertRow(angka);
nomor++;
}
var headerName = header.insertCell(-1);
dengan(namaheader.gaya){
lebar = tdWidthNum;
warna = "biru";
kursor = "penunjuk";
}
//var headerType = header.insertCell(-1);
jika(boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + idStr) + ": " + eval(arrName + "[i]." + nameStr)));
lain jika(!boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + nameStr)));
//headerType.appendChild(document.createTextNode("Jenis"));
headerName.onclick = fungsi(){
jika (bodoh)
obj.value = obj.value + this.innerHTML + ";";
lain jika(!bool)
obj.nilai = ini.innerHTML;
//Hapus formulir pop-up
dokumen.body.removeChild(alertDiv);
dokumen.body.removeChild(alertDivParent);
};
}
//Tambahkan tabel ke DIV yang menampilkan informasi
alertDiv.appendChild(alertInfoTab);
}
</skrip>