ขอสอบถามเรื่อง jquery หน่อยครับ เรื่องการอ้างอิง ของ tag

พูดคุย แลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework Jquery

Moderator: mindphp

บอย112233

ขอสอบถามเรื่อง jquery หน่อยครับ เรื่องการอ้างอิง ของ tag

Post by บอย112233 » 04/11/2013 7:42 pm

ผมมี code HTML ดังนี้

<tbody id="1">
<tr>
<td></td>
<tr>
</tbody>
<tbody id="2">
<tr>
<td></td>
<tr>
</tbody>
<tbody id="3">
<tr>
<td></td>
<tr>
</tbody>

ส่วน script ก็เป็นแบบนี้ครับ

$(document).ready(function(){
$('table tbody').each(function(index){
var $table = $(this);
$('<div class="box">click</div>').appendTo('body').click(function()
{
alert($(this).attr('class'));
alert($table.attr('id'));
});
});
});



สิ่งที่อยากทราบคือ
ในการ loop หา tbody มันจะสร้าง div class ="box" ให้ด้วยและสามารถคลิกได้
แต่เวลาคลิกนี้แหละมันจะทราบได้ไงครับว่าเราคลิกที่ tbody ตัวไหน ที่อ้างอิงกับ div ที่สร้างด้วย .each()

User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 11217
Joined: 18/04/2012 9:39 am

Re: ขอสอบถามเรื่อง jquery หน่อยครับ เรื่องการอ้างอิง ของ tag

Post by tsukasaz » 06/11/2013 10:12 am

Code: Select all

$(document).ready(function(){ // ตรวจสอบว่าหน้าเว็บโหลดข้อมูลมาครบ พร้อมทำงานหรือยัง ถ้าโหลดพร้อมแล้วจะทำคำสั่งภายใน
   $('table tbody').each(function(index){ // วนลูปตามจำนวนของ tbody ในโค้ดจะวน 3 รอบ
      var $table = $(this); // เก็บค่า Object ของ tbody ในแต่ละรอบไว้ที่ตัวแปร $table

      $('<div class="box">click</div>').appendTo('body').click(function()
      { // สร้าง tag <div class="box">click</div> แล้วเพิ่มเข้าไปใน body ของโค้ด และกำหนดเหตุการณ์คลิกให้กับมัน

         alert($(this).attr('class')); 
         // $(this) ในที่นี้หมายถึง Object ของ <div class="box">click</div> ให้ alert ตัว attribute ชื่อ class ซึ่งก็คือค่า box

         alert($table.attr('id')); 
         // $table คือ Object ของ tbody ที่ประกาศไว้ ให้ alert ตัว attribute ชื่อ id ซึ่งก็คือค่า 1 2 3 แล้วแต่ว่าในลูปนั้นเป็น tbody ตัวไหน
      });
   });
});
ถ้าแตกการทำงานของลูปออกจะเป็น

Code: Select all

// รอบที่ 1 
$('<div class="box">click</div>').appendTo('body').click(function()
{ 
   alert('box'); 
   alert(1); 
});

// รอบที่ 2
$('<div class="box">click</div>').appendTo('body').click(function()
{ 
   alert('box'); 
   alert(2); 
});

// รอบที่ 3
$('<div class="box">click</div>').appendTo('body').click(function()
{ 
   alert('box'); 
   alert(3); 
});
จริงๆ แล้วตอนที่คลิก <div class="box">click</div> มันไม่ได้วิ่งไปหา tbody เพื่อเอาค่า id แต่มันถูกกำหนดค่ามาเรียบร้อยแล้วในตอนวนลูป ว่าถ้าถูกคลิกจะต้อง alert อะไร
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)


Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “JavaScript & Jquery Ajax”

Who is online

Users browsing this forum: No registered users and 2 guests