javascript - 我必须从 Controller 访问表 tr 以突出显示行

Question

我在 Controller 中有我的表，我想选择 <tr>在选择表格行后使用脚本从 View 页面突出显示表格行

查看:

<link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/datatables/dataTables.bootstrap4.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/custom/css/custom_style.css">
    <style>
       .highlight { background-color: #1DA5FF; color:#fff; }
        th,
        td {
            white-space: nowrap;
        }
        div.dataTables_wrapper {
            direction: rtl;
        }
        div.dataTables_wrapper {
            width: 1000px;  
            margin: 0 auto;
            font-family: Vazir;
            font-size: 10px;
        }
        th {
            min-width: 80px;
            height: 32px;
            border: 1px solid #222;
            white-space: nowrap;
        }
        td {

            min-width: 80px;
            height: 32px;
            border: 1px solid #222;
            white-space: nowrap;
            text-align: center;
        }
    </style>

<form role="form" id="print_loading_sheet" method="POST" enctype="multipart/form-data">
  <section class="content">
      <div class="row">
       <div class="table-responsive">
         <table id="loading_sheet_table" class="table table-bordered table-striped table-sm" >
        </table>
     </div>
   </div>
  </section>
</form>

<script>
  $(document).ready(function($) {
          var ac_type="<?php echo $_POST['ac_type']; ?>";
          var Station="<?php echo isset($_POST['Station'])? $_POST['Station'] :''; ?>";
          var MainStaion="<?php echo isset($_POST['MainStaion'])? $_POST['MainStaion'] : '';  ?>";
          var All="<?php echo isset($_POST['All'])? $_POST['All'] : '';  ?>";


       $.ajax({
               url :"<?php echo base_url(); ?>booking/report/loading_sheet/LoadingSheetController/loadingSheet",
               type: 'POST',               
               data: {
                ac_type:ac_type,
                Station:Station,
                MainStaion:MainStaion
               },
               dataType: "html",
               success: function(data){

                  $('#loading_sheet_table').html(data);

               },async:false,
               error:function(data){
                console.log('error occured during featch');
               }
           });

      $("#loading_sheet_table tr").click(function() {
      var selected = $(this).hasClass("highlight");
      $("#loading_sheet_table tr").removeClass("highlight");
      if(!selected)
      $(this).addClass("highlight");
      });

   });
</script>

Controller :

<?php 

 public function loadingSheet(){
         $brnachId     = $this->session->userdata('user_branch');
         $ac_type      = $this->input->post('ac_type');

         $formData = array();
         $data = array( 'ac_type'           => $ac_type,                
                         'station'           => $to, );        

          $this->load->model('booking/report/LoadingSheetModel','sendValues');
          $modResult = $this->sendValues->receivingSheetOfStationwise($data,$brnachId); 

          ?>

     <form role="form" id="bilties" name="bilties" method="post">
            <table id="loading_sheet_table" class="table table-bordered  table-sm" style=" overflow: auto;" >
                <thead >
                  <tr>
                  <th class="col1"><input   type="checkbox" name="selectedrecord" class="checkbox" value="1"><br>Bilty Id</th>
                  <th class="col2"><input   type="checkbox" name="selectedrecord" class="checkbox" value="2"><br>LR No</th>
                  <th class="col3"><input   type="checkbox" name="selectedrecord" class="checkbox" value="3"><br>Consignor Name</th>
                  </tr>
                </thead>
                <tbody>
                  <?php foreach($modResult as $bilty):?>

                  <tr>
                  <td><?php echo $bilty->id;?></td>
                  <td><?php echo $bilty->lr_no;?></td>
                  <td><?php echo $bilty->consignor;?></td>
                </tr>
                <?php endforeach; ?>              
                </tbody> 
                  </tr>     
           </table>
    </form>  

         <?php } ?>

我不知道我的代码哪里错了

Answer 1

只需将您的 jquery 代码替换为

$(document).on("click","#loading_sheet_table tr",function() {
  var selected = $(this).hasClass("highlight");
  $("#loading_sheet_table tr").removeClass("highlight");
  if(!selected)
  $(this).addClass("highlight");
});

因为你必须采取动态生成的元素点击事件。