javascript - Jquery table td click not working properly -


i have php code wich generates table. inside td have inserted img. when user click on td changes img inside it. not working properly. rows td element changes image while odd rows doesn't. below code:

    <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 $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 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 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 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 best!" />                                   </td>                              <?php endif; ?><?php }?><?php $this->db->where('class_id',$class_id);     $this->db->from('student');     $nofs = $this->db->count_all_results(); ?>  <!-- script 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> 

try syntax ,

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

also use 'class' since 'id' attrib should unique


Comments