jQuery table td click 无法正常工作

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”属性应该是唯一的