Jquery表td点击不正常

时间:2016-01-29 06:47:27

标签: javascript php jquery html css

我有生成表格的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>

1 个答案:

答案 0 :(得分:0)

试试这个语法,

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

也可以使用&#39; class&#39;因为&#39; ID&#39; attrib应该是唯一的