นี่คือซอร์สโค้ด ไม่มีการประมวลผลสไตล์ แต่ฟังก์ชันก็โอเค ฉันหวังว่าทุกคนจะสื่อสารกับฉันได้!
คัดลอกรหัสรหัสดังต่อไปนี้:
<html>
<หัว>
<title>คลิกเพื่อแสดงข้อมูลการเลือก DIV</title>
<meta http-equiv="คำหลัก" 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: Absolute;"></div>
</ร่างกาย>
</html>
<script type="text/javascript">
//ข้อมูลอาร์เรย์
var arrs = อาร์เรย์ใหม่ ();
arrs.push({id: "1", ชื่อ: "จางซาน 3"});
arrs.push({id:"2", ชื่อ:"李思3"});
arrs.push({id:"3", ชื่อ:"Shen Wuwu 3"});
arrs.push({id:"4", ชื่อ:"โจวหว่านซง3"});
arrs.push({id: "5", ชื่อ: "Qin Xiao คือ 3"});
arrs.push({id:"6", ชื่อ:"王五"});
arrs.push({id:"7", ชื่อ:"เล่ม 3"});
-
* obj: คลิกวัตถุของกล่องข้อความ
* idStr: ชื่อคีย์ id ของอาร์เรย์ json
* nameStr: คีย์ชื่อของอาร์เรย์ json
* bool: true: หมายถึงการต่อท้าย false: หมายถึงการกำหนดใหม่
* boolSet: true: ทั้งค่า ID และชื่อจะแสดงเป็นเท็จ: แสดงเฉพาะค่าชื่อเท่านั้น
* widthNum: ความกว้างของข้อมูล DIV
* heightNum: ความสูงของข้อมูล DIV
* arrName: ชื่ออาร์เรย์
-
ฟังก์ชั่น alertDivINFO (obj, idStr, nameStr, bool, boolSet, widthNum, heightNum, arrName){
obj.เบลอ();
ถ้า(!widthNum){
ความกว้าง = 600;
-
ถ้า(!ความสูงNum){
ความสูง = 350;
-
//สร้าง DIV ขนาดใหญ่
var alertDivParent = document.createElement("div");
alertDivParent.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 alertDiv = document.createElement("div");
alertDiv.id = "alertDiv";
ด้วย (alertDiv.style){
width = widthNum;
ความสูง = ความสูงจำนวน;
ตำแหน่ง = "สัมบูรณ์";
พื้นหลัง = "#DDDDDD";
ซ้าย = (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 การค้นหา
var alertQueryDiv = document.createElement("div");
alertQueryDiv.id = "alertQueryDiv";
//เพิ่ม DIV ที่ค้นหาไปยังข้อมูล DIV
alertDiv.appendChild(alertQueryDiv);
alertQueryDiv.innerHTML = "ชื่อการค้นหา:";
//สร้างกล่องข้อความ
var alertQueryINPUT = document.createElement("อินพุต");
alertQueryINPUT.id = "alertQueryINPUT";
alertQueryINPUT.type = "ข้อความ";
//เพิ่มกล่องข้อความลงใน DIV ที่ค้นหา
alertQueryDiv.appendChild (alertQueryINPUT);
//สร้างปุ่มค้นหา
var alertQueryBUTTON = document.createElement("อินพุต");
alertQueryBUTTON.id = "alertQueryBUTTON";
alertQueryBUTTON.type = "ปุ่ม";
alertQueryBUTTON.value = "ค้นหา";
//เพิ่มเหตุการณ์ไปที่ปุ่ม
alertQueryBUTTON.onclick = ฟังก์ชั่น () {
//คำนวณว่าสามารถวางเซลล์ได้กี่เซลล์ในความกว้างนี้
var tdWidthNum = 130;
var tdNum = parseInt(widthNum / tdWidthNum);
วาร์นัม = 0;
วาร์ เจ = 0;
//รับตารางแสดงข้อมูล
var alertInfoTab = document.getElementById("alertInfoTab");
//ล้างข้อมูล THead
alertInfoTab.deleteTHead();
//อาร์เรย์วนซ้ำ
สำหรับ(var i = 0; i < eval(arrName).length; i ++){
//หากเท่ากับอาร์เรย์ ให้เพิ่มลงใน TABLE
ถ้า(eval(arrName + "[i]." + nameStr).indexOf(alertQueryINPUT.value) >= 0){
ส่วนหัว var;
ถ้า(เจ % tdNum == 0){
ส่วนหัว = alertInfoTab.createTHead();
ส่วนหัว = header.insertRow (หมายเลข);
หมายเลข++;
-
เจ++;
var headerName = header.insertCell(-1);
ด้วย(headerName.style){
ความกว้าง = tdWidthNum;
สี = "สีน้ำเงิน";
เคอร์เซอร์ = "ตัวชี้";
-
ถ้า(บูลเซ็ต)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + idStr) + ": " + eval(arrName + "[i]." + nameStr)));
อย่างอื่นถ้า(!boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + nameStr)));
headerName.onclick = ฟังก์ชั่น(){
ถ้า(บูล)
obj.value = obj.value + this.innerHTML + ";";
อย่างอื่นถ้า(!bool)
obj.value = this.innerHTML;
//ลบแบบฟอร์มป๊อปอัพออก
document.body.removeChild (alertDiv);
document.body.removeChild (alertDivParent);
-
-
-
-
//เพิ่มปุ่มให้กับ DIV ที่ค้นหา
alertQueryDiv.appendChild (alertQueryBUTTON);
//สร้างปุ่มที่ชัดเจน
var alertClearBUTTON = document.createElement("อินพุต");
alertClearBUTTON.id = "alertClearBUTTON";
alertClearBUTTON.type = "ปุ่ม";
alertClearBUTTON.value = "ล้าง";
alertClearBUTTON.onclick = ฟังก์ชั่น () {
//กำหนดค่า Null ให้กับกล่องข้อความ
obj.value = "";
//ลบแบบฟอร์มป๊อปอัพออก
document.body.removeChild (alertDiv);
document.body.removeChild (alertDivParent);
-
//เพิ่มปุ่มให้กับ DIV ที่ค้นหา
alertQueryDiv.appendChild (alertClearBUTTON);
//สร้างปุ่มปิด
var alertCancelBUTTON = document.createElement("อินพุต");
alertCancelBUTTON.id = "alertCancelBUTTON";
alertCancelBUTTON.type = "ปุ่ม";
alertCancelBUTTON.value = "ปิด";
alertCancelBUTTON.onclick = ฟังก์ชั่น(){
//ลบแบบฟอร์มป๊อปอัพออก
document.body.removeChild (alertDiv);
document.body.removeChild (alertDivParent);
-
//เพิ่มปุ่มให้กับ DIV ที่ค้นหา
alertQueryDiv.appendChild (alertCancelBUTTON);
//สร้างตารางเพื่อแสดงข้อมูล
var alertInfoTab = document.createElement("ตาราง");
alertInfoTab.id = "alertInfoTab";
ด้วย (alertInfoTab.style){
มาร์จิ้น = 20;
-
//คำนวณว่าสามารถวางเซลล์ได้กี่เซลล์ในความกว้างนี้
var tdWidthNum = 130;
var tdNum = parseInt(widthNum / tdWidthNum);
วาร์นัม = 0;
สำหรับ(var i = 0; i < eval(arrName).length; i ++){
ส่วนหัว var;
ถ้า(i % tdNum == 0){
ส่วนหัว = alertInfoTab.createTHead();
ส่วนหัว = header.insertRow (หมายเลข);
หมายเลข++;
-
var headerName = header.insertCell(-1);
ด้วย(headerName.style){
ความกว้าง = 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("ประเภท"));
headerName.onclick = ฟังก์ชั่น(){
ถ้า(บูล)
obj.value = obj.value + this.innerHTML + ";";
อย่างอื่นถ้า(!bool)
obj.value = this.innerHTML;
//ลบแบบฟอร์มป๊อปอัพออก
document.body.removeChild (alertDiv);
document.body.removeChild (alertDivParent);
-
-
//เพิ่มตารางลงใน DIV ที่แสดงข้อมูล
alertDiv.appendChild(alertInfoTab);
-
</สคริปต์>