Tableau php et javascript

Fermé

Sarah - Modifié par Sarah le 2/10/2014 à 09:49
Sarah - 2 oct. 2014 à 16:12

Bonjour à tous,

Voilà mon problème :

J'ai un tableau dans lequel je remplis les lignes avec les données de ma base de donnée. Jusque là tout va bien. Ensuite quand je survole le tableau avec ma souris le fond se change.


<style type="text/css">
 tr { background-color:#fff; }
 .survolRed {background-color:#8cbfff;}
</style>

<script type="text/javascript">
function hoverTr() {
 var tabTr = document.getElementsByTagName('tr'); // récupération de tous les tr
 
 for(var i = 0; i < tabTr.length; i++) {
 if(tabTr[i].className != 'blanc')// filtre sur les tr donc seule celle dont le className != 'blanc' changerons de couleur au passage de la souris
   {
  tabTr[i].onmouseover = survolerTr; //onmouseover
  tabTr[i].onmouseout = QuitterTr; //onmouseout 
   } 
 }//for
 
 function survolerTr() {
  this.className = 'survolRed';
 }//onmouseover
 
 function QuitterTr() {
  this.className = '';
 }//onmouseout
}
</script>

Lorsque je survole ça change mais est il possible que si on clic sur la ligne 1 la couleur reste (même si on survole une autre comme une mémorisation ) mais si on clic sur la ligne 2 c'est elle qui devient en couleur (qui reste jusqu'à temps qu'on clic sur une autre) ?
Merci d'avance à tous

P.S: j'ai trouvé ce petit script car je suis une bille en JS

A voir également:

Tableau php et javascript
Tableau croisé dynamique - Guide
Tableau ascii - Guide
Tableau word - Guide
Trier tableau excel - Guide
Telecharger javascript - Télécharger - Langages

2 réponses

Réponse 1 / 2

JooS Messages postés 2468 Date d'inscription mardi 22 janvier 2008 Statut Membre Dernière intervention 8 juin 2016 228
2 oct. 2014 à 15:12

Salut,

Je te conseille d'utiliser jQuery, c'est plus rapide et facile à réaliser !

<!DOCTYPE html>
<html>
<head>
  <title>Page</title>
  <style>
  tr { background-color:#fff; }
  .selected {background-color:#8cbfff;}
  .hovered {background-color:#8cbfff;}
  </style>
  
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script>
  $(document).ready(function() {
    $("tr").on("click", function() {
      $("tr").removeClass("selected");
      $(this).addClass("selected");
    });

    $("tr").mouseenter(function() {
      $(this).addClass("hovered");
    });

    $("tr").mouseleave(function() {
      $(this).removeClass("hovered");
    });

  });
  </script>
<head>

<body>
  <table>
    <tr>
      <td>Element 1</td>
    </tr>
    <tr>
      <td>Element 2</td>
    </tr>
    <tr>
      <td>Element 3</td>
    </tr>
  </table>
</body>
</html>

Réponse 2 / 2

Sarah
2 oct. 2014 à 16:12

Merci tu es super je vais essayer de me lancer dans le Jquery même si j'y connais rien

Discussions similaires

Formule taux de marque

Bibliothèque

Modèle fichier excel comparateur mutuelle

Javascript Arrondi à 2 chiffres après la virgule