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
Telecharger javascript - Télécharger - Langages
Easy php - Télécharger - Divers Web & Internet

2 réponses

Réponse 1 / 2

JooS Messages postés 2465 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

ou sont les bananes ?

ALERT en php

Nom de champs du tableau croisé dynamique non valide

generateur de combinaison du loto 5/90

Bibliothèque

Discussions similaires

Newsletters