Jquery table td click click not working properly

Question

我有php代碼生成表。在td裏面我插入了img。當用戶點擊td時，它會改變它內部的img。但它不能正常工作。只有偶數行td元素纔會改變圖像，而奇數行則不會。下面是我的代碼：

<div class="row" id="atten_list"> 
     <div class="col-sm-offs-3 col-md1-6"> 
      <table class="table table-bordered"> 
       <thead> 
        <tr> 
         <td><?php echo get_phrase('roll');?></td> 
         <td><?php echo get_phrase('name');?></td> 
         <td><?php echo get_phrase('1');?></td> 
         <td><?php echo get_phrase('2');?></td> 
         <td><?php echo get_phrase('3');?></td> 
         <td><?php echo get_phrase('4');?></td> 
         <td><?php echo get_phrase('5');?></td> 
         <td><?php echo get_phrase('6');?></td> 
         <td><?php echo get_phrase('7');?></td> 
         <td><?php echo get_phrase('8');?></td> 
         <td><?php echo get_phrase('9');?></td> 
         <td><?php echo get_phrase('10');?></td> 
         <td><?php echo get_phrase('11');?></td> 
         <td><?php echo get_phrase('12');?></td> 
         <td><?php echo get_phrase('13');?></td> 
         <td><?php echo get_phrase('14');?></td> 
         <td><?php echo get_phrase('15');?></td> 
         <td><?php echo get_phrase('16');?></td> 
         <td><?php echo get_phrase('17');?></td> 
         <td><?php echo get_phrase('18');?></td> 
         <td><?php echo get_phrase('19');?></td> 
         <td><?php echo get_phrase('20');?></td> 
         <td><?php echo get_phrase('21');?></td> 
         <td><?php echo get_phrase('22');?></td> 
         <td><?php echo get_phrase('23');?></td> 
         <td><?php echo get_phrase('24');?></td> 
         <td><?php echo get_phrase('25');?></td> 
         <td><?php echo get_phrase('26');?></td> 
         <td><?php echo get_phrase('27');?></td> 
         <td><?php echo get_phrase('28');?></td> 
         <td><?php echo get_phrase('29');?></td> 
         <td><?php echo get_phrase('30');?></td> 
         <td><?php echo get_phrase('31');?></td> 
        </tr> 
       </thead> 
        <tbody> 

         <?php 
         $students = $this->db->get_where('student' , array('class_id'=>$class_id))->result_array(); 

         foreach($students as $row): 

          ?> 
          <tr class="gradeA" id="adata"> 
           <td><?php echo $row['roll'];?></td> 
           <td><?php echo $row['name'];?></td> 
           <?php 
           for($i=1; $i<=31; $i++){ ?><?php 
            $datea = $i; 
            $full_date = $year.'-'.$month.'-'.$datea; 

            //inserting blank data for students attendance if unavailable 
            $verify_data = array( 'student_id' => $row['student_id'], 
                   'date' => $full_date); 
            $query = $this->db->get_where('attendance' , $verify_data); 
            if($query->num_rows() < 1){ 
            $this->db->insert('attendance' , $verify_data);} 

            //showing the attendance status editing option 
            $attendance = $this->db->get_where('attendance' , $verify_data)->row(); 
            $status  = $attendance->status; 
            $id = $attendance->attendance_id; 
           ?> 
          <?php if ($status == 1):?> 
           <td align="center" id="status" title="<?php echo $id; ?>"> 
           <img src="<?php echo base_url("/assets/images/present.png"); ?>" alt="StackOverflow" title="StackOverflow is the best!" /> 
           </td> 
          <?php endif;?> 
          <?php if ($status == 2):?> 
           <td align="center" id="status" title="<?php echo $id; ?>"> 
           <img src="<?php echo base_url("/assets/images/absent.png"); ?>" alt="StackOverflow" title="StackOverflow is the best!" /> 
           </td> 

          <?php endif; ?><?php }?><?php $this->db->where('class_id',$class_id); 
    $this->db->from('student'); 
    $nofs = $this->db->count_all_results(); ?> 

<!-- Script for changing image on td click --> 
             <script> 
$("table tbody tr#adata td#status").click(function() { 
     var img = $(this).find("img")[0]; 
     if(img.src == '<?php echo base_url("/assets/images/present.png"); ?>'){ 
     img.src = img.src.replace('<?php echo base_url("/assets/images/present.png"); ?>', '<?php echo base_url("/assets/images/absent.png"); ?>'); 

     } 
     else if(img.src == '<?php echo base_url("/assets/images/absent.png"); ?>'){ img.src = img.src.replace('<?php echo base_url("/assets/images/absent.png"); ?>', '<?php echo base_url("/assets/images/present.png"); ?>'); 
     }else{} 
    }); </script> 
          </tr> 
         <?php endforeach;?> 

       </tbody> 
      </table> 
     </div> 
    </div> 

Answer 1

試試這個語法，

$('table').on('click','td',function(){ 
//Your code 
}); 

還可以使用 '階級'，因爲 'ID' ATTRIB應該是唯一的