การหา index ของ Element id ใน Object Array ด้วย getElementsByTagName()
เรื่องมีอยู่ว่าผมใช้ searchhi ของ Stuart Langridge เพื่อใช้ search และมีการ hilight สีเหลืองข้อความที่ค้นหา ปรากฏว่า เอามาใช้บน Blogger เรื่อง สุภาษิตสำนวนไทย ปรากฏว่า พอกดค้นคำปุ๋บ คำค้นหาถูกป้ายสีเหลืองเต็มหมดไปทั้งหน้า แต่จริง ๆ ที่ต้องการให้ค้นคือข้อความที่อยู่ในตารางเท่านั้น ข้อความที่พิมพ์ค้นหา แต่อยู่นอกตารางไม่ต้องไปยุ่งด้วย
ตรวจดูโค้ด เห็นเขาใช้
getElementsByTagName('body')[0]
คือให้ไปเอา element ที่เป็น body ดังนั้น ในหน้า Blogger ทั้งหมด จึงอยุ่ในบริเวณที่เขาจะทำการป้ายสีเหลืองให้ ดังนั้น จึงเหลืองทั้งหน้า ทุก Post ซึ่งไม่เป็นที่ต้องการ
ข้อมูลที่จะให้ค้นหาของผม อยู่ในตาราง ที่ใช้ id ว่า myTable คือ <table id="myTable">ดังนั้น ผมจึงต้องระบุ tag name จาก body เป็น table
แต่ปัญหาคือ แล้วเจ้า index [0] นั้น ตาราง id="myTable" ของผม จะเป็นเท่าไร เพราะ template ของ Blogger ก็คงจะมีอยู่หลายตารางเหมือนกัน ดังนั้น จึงต้องหา index และกำหนดให้ถูกคือ
getElementsByTagName('table')[?]
เจ้าเครื่องหมายคำถามนี้แหละ ต้องหาให้ได้
โดยปกติการหา element ของ document จะใช้
getElementsByTagName('body')[0]
คือให้ไปเอา element ที่เป็น body ดังนั้น ในหน้า Blogger ทั้งหมด จึงอยุ่ในบริเวณที่เขาจะทำการป้ายสีเหลืองให้ ดังนั้น จึงเหลืองทั้งหน้า ทุก Post ซึ่งไม่เป็นที่ต้องการ
ข้อมูลที่จะให้ค้นหาของผม อยู่ในตาราง ที่ใช้ id ว่า myTable คือ <table id="myTable">ดังนั้น ผมจึงต้องระบุ tag name จาก body เป็น table
แต่ปัญหาคือ แล้วเจ้า index [0] นั้น ตาราง id="myTable" ของผม จะเป็นเท่าไร เพราะ template ของ Blogger ก็คงจะมีอยู่หลายตารางเหมือนกัน ดังนั้น จึงต้องหา index และกำหนดให้ถูกคือ
getElementsByTagName('table')[?]
เจ้าเครื่องหมายคำถามนี้แหละ ต้องหาให้ได้
โดยปกติการหา element ของ document จะใช้
- getElementById() ถ้าเรารู้ว่า id ของ element นั้น คืออะไร เช่น id="myContent" เป็นต้น
- หรือ getElementsByTagName() ถ้าเรารู้ว่า element นั้นชื่ออะไร เช่น body, ul, ol หรือ table เป็นต้น
ในกรณีที่ เรารู้ id และรู้ tag name แต่ใน document นั้น มี tag name นี้หลาย tag name ซึ่งแต่ละ tag name จะมี id เป็นของตน เช่น
มีตารางสำหรับข้อมูลลูกค้า และตารางสำหรับแดสง events ต่าง ๆ คือ <table id="cust"></table> และ <table id="events"></table>
มีตารางสำหรับข้อมูลลูกค้า และตารางสำหรับแดสง events ต่าง ๆ คือ <table id="cust"></table> และ <table id="events"></table>
เราต้องการเลือก element ที่มี id ที่ระบุเท่านั้น เช่น ต้องการเลือกตารางข้อมูลลูกค้า อย่างนี้จะทำอย่างไร
หลักการ
เนื่องจาก getElementsByTagName จะให้ผลลัพธ์เป็น Array ซึ่งใน Array นี้ จะมี Object ที่เป็น element ที่ระบุอยู่ทุกตัว (getElementsByTagName จึงมีตัว s อยู่ด้วย แสดงว่าต้องมีหลายตัวในนี้) ซึ่งแต่ละตัวก็จะมี id ของตนเอง ดังนั้น ถ้าวนรอบ Array นี้ และระบุ id ที่ต้องการ ก็จะทราบ index ของ element ที่ต้องการ
วิธีการ
<!doctype html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function find(elementName,id){
var thisIndex = findMe(elementName,id)
alert("index for " + elementName + " id=" + id + " is: " + thisIndex);
}
function findMe(whatTagName,what_id){
var myObjArry = document.getElementsByTagName(whatTagName);
for (var i= 0; i < myObjArry.length; i++) {
if (myObjArry[i].id==what_id)
{
return i;
}
}
}
</script>
</head>
<body>
<table id ="tbl_1"><tr><td>dkddk</td></tr></table>
<table id ="tbl_2"><tr><td>aabbcc</td></tr></table>
<input type="button" id="search" value="ค้นหา" onClick="find('table','tbl_1')">
</body>
</html>
ความคิดเห็น
แสดงความคิดเห็น