11498 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
j'ai soucis sur mon code, il ne fonctionne pas, le principe de mon code est de sélectionné une ligne de mon tableau via la souris. j'ai vérifié avec firebug il y a aucune erreur, voici mon code

<?php require_once "PDO_connect.php";
 
$query="SELECT * FROM smartphone.abonnements";
try{
  $prep = $bdd->prepare($query);
  $prep->execute();
  $resultats = $prep->fetchAll();
  
}catch(Exception $e){;
  echo "Erreur ! ".$e->getMessage() ;
}
?>
<!DOCTYPE>
<html>
<head>
 <title>Abonnement</title>
 <link rel="stylesheet" type="text/css" href="Select.css">
 <style>
   .selline { background-color: silver;}
 </style>
 <script type="text/javascript">
function dataTable()
$(document).ready(function() {
     var table = $('#example').dataTable();
    $('#example tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        } 
        }
         );
 
    $('.button').click( function () {
        table.row('.selected').remove().draw( false );
    } );
 } ); 
</script>
</head>
<body>
<center>
  <table id="#example" class="DataTable" >
   <thead>
   <tr>
     <th>Operateur</th>
     <th>SIM</th>
     <th>PUK</th>
     <th>Num ligne</th>
     <th>Volume</th>
     <th>Statut abo</th>
   </tr>    
   </thead><tbody>
   <?php
   echo "<br>";
   if(!empty($resultats)){
   foreach  ($resultats as $row) {
 
     echo "<tr>";
      echo "<td data-name=\"Operateur\">".$row["Operateur"]."</td>";
      echo "<td data-name=\"Num_SIM\">".$row["Num_SIM"]."</td>";
      echo "<td data-name=\"PUK\">".$row["PUK"]."</td>";
      echo "<td data-name=\"Num_ligne\">".$row["Num_ligne"]."</td>";
      echo "<td data-name=\"Volume\">".$row["Volume"]."</td>";
      echo "<td data-name=\"Statut_abo\">".$row["Statut_abo"]."</td>";
      echo "</tr>";
   }
     }else {
   echo "Pas d'enregistrements dans cette table...";
   }
      ?>
      </tbody></table></center>
</body>
</html>

Merci
Bonjour,
Ton javascript ne fait que désélectionner une ligne :
Au clic sur une ligne, si celle ci a la classe "selected", enlever cette classe.
Si tu veux sélectionner une ligne, il faut le dire:

        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        } else {
           $(this).addClass('selected');
       }

ou

$('#example tbody').on( 'click', 'tr', function () {
    $(this).toggleClass('selected');
});

Modifié par loicbcn (27 Dec 2016 - 08:27)