1
votes

Je dois accéder à la table tr du contrôleur pour la ligne de surbrillance

J'ai Ma table dans le contrôleur et je souhaite sélectionner pour mettre en surbrillance la ligne du tableau de la page d'affichage avec le script après la ligne du tableau sélectionnée

Affichage:

 <?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 } ?>
Controller:
<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>
  Je ne sais pas où je me trompe dans mon code

php javascript jquery datatable codeigniter

3 commentaires

Obtenez-vous le tableau en réponse après le succès de la demande ajax?

Pendant que vous générez des lignes dynamiquement, vous devez utiliser $ ("# loading_sheet_table"). On ('click', 'tr', function () { OU $ (document) .on (' click ', "#loading_sheet_table tr", function () { au lieu de $ ("# loading_sheet_table tr"). click (function () {

@ShivendraSingh oui

3 Réponses :

1
votes

Il suffit d'ajouter l'état opposé de selected pour supprimer la classe highlight lorsque le tr est déjà sélectionné:

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

p >

0 commentaires

1
votes

utilise la méthode on (). La méthode On fonctionnera à la fois pour les éléments actuels et FUTURE (comme un nouvel élément ajouté par un script).

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

0 commentaires

1
votes

remplacez simplement votre code jquery par

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

car vous devez prendre un événement de clic d'élément généré dynamiquement.

1 commentaires

cela fonctionne mais il met en évidence la ligne alternative de couleur d'arrière-plan