IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Surbrillance sur les lignes d'un tableau


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Homme Profil pro
    Chercheur en informatique
    Inscrit en
    Décembre 2016
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Chercheur en informatique

    Informations forums :
    Inscription : Décembre 2016
    Messages : 39
    Points : 23
    Points
    23
    Par défaut Surbrillance sur les lignes d'un tableau
    Bonjour à tous,
    J'ai problème sur mon tableau. en effet j'ai un tableau qui a 4 lignes et j'ai crée une fonction que lorsque je clique sur une ligne qu'une couleur de fond apparaisse, à ce niveau tout marche sans problème.
    Maintenant j'ai fais une autre fonction avec deux bouton UP(monter) et DOWN (descendre). Cette fonction à pour but de faire monter ou descendre la couleur du fond de la ligne sur les autres ligne du tableau sans déplacer la ligne.Mais chez moi ma fonction déplace plutôt la ligne.
    voici mon tableau :
    Nom : Capture.PNG
Affichages : 2959
Taille : 22,9 Ko

    Et voici le code qui met le fond sur la ligne lorsque je clique sur une ligne :
    Nom : Capture.PNG
Affichages : 2009
Taille : 21,3 Ko

    Voici le code de la fonction que j'ai faite pour déplacer le fond de couleur de la ligne :

    Nom : Capture.PNG
Affichages : 2129
Taille : 45,3 Ko

    S'il vous plait aider si quelqu'un s'y connait je suis un débutant en javascript.

    merci d'avance !

  2. #2
    Modérateur
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    Décembre 2004
    Messages
    6 067
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Décembre 2004
    Messages : 6 067
    Points : 17 152
    Points
    17 152
    Par défaut
    Salut romyney

    Plutôt qu'une capture d'écran, copier/coller le code et placez le entre les balises [CODE].... ici le code ....[/CODE]
    Soyez sympa, pensez -y
    Balises[CODE]...[/CODE]
    Balises[CODE=NomDuLangage]...[/CODE] quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Balises[C]...[/C] code intégré dans une phrase.
    Balises[C=NomDuLangage]...[/C] code intégré dans une phrase quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Le bouton en fin de discussion, quand vous avez obtenu l'aide attendue.
    ......... et pourquoi pas, pour remercier, un pour celui/ceux qui vous ont dépannés.
    👉 → → Ma page perso sur DVP ← ← 👈

  3. #3
    Membre à l'essai
    Homme Profil pro
    Chercheur en informatique
    Inscrit en
    Décembre 2016
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Chercheur en informatique

    Informations forums :
    Inscription : Décembre 2016
    Messages : 39
    Points : 23
    Points
    23
    Par défaut
    ok merci déja

    voici le code de mon tableau
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <table id = "table" border="1">
    		<tr>
    			<td>A1</td>
    			<td>B1</td>
    			<td>C1</td>
    			<td>D1</td>
    		</tr>
    		<tr>
    			<td>A2</td>
    			<td>B2</td>
    			<td>C2</td>
    			<td>D2</td>
    		</tr>
    		<tr>
    			<td>A3</td>
    			<td>B3</td>
    			<td>C3</td>
    			<td>D3</td>
    		</tr>
    		<tr>
    			<td>A4</td>
    			<td>B4</td>
    			<td>C4</td>
    			<td>D4</td>
    		</tr>

    et voici le code qui fait apparaître la couleur de fond sur la ligne lors du clique

    var index;
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function getSelectdRow(){
        var table = document.getElementById('table');
        for(var i= 0;i<table.rows.length;i++){
            table.rows[i].onclick= function(){
                if(typeof index != "undefined"){
                    table.rows[index].classList.toggle("selected");
                };
                index = this.rowIndex;
                this.classList.toggle("selected");
            }
        }
    }getSelectdRow();
    et enfin voici la fonction qui devrait déplacer la couleur de fond vers la ligne supérieur :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
     
    /******************* fonction pour faire monter la couleur sur les lignes ******************************/
    function UpDown(direction){
    	var index;
    	var table = document.getElementById("table");
    	//parent = table[this.rowIndex].parentNode;
    	for (var i = 0; i < table.rows.length; i++) {
    		if( direction === 'up'){
     
    			if(typeof index != "undefined"){
    				getSelectdRow();
    			}
    		}
    	}
    }
    merci !!

  4. #4
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Citation Envoyé par romyney Voir le message
    Cette fonction à pour but de faire monter ou descendre la couleur du fond de la ligne sur les autres ligne du tableau sans déplacer la ligne.
    Oui mais de quelle ligne ? Il peut y avoir plusieurs lignes, non ? Avec ta fonction tu peux en cliquant sélectionner plusieurs lignes alors dans ce cas la couleur de fond de quelle ligne doit monter ou descendre ?

    Dans tous les cas tu as plusieurs exemples de rotation dans ce fil : Rotation de couleurs (cell's background-color)

  5. #5
    Membre à l'essai
    Homme Profil pro
    Chercheur en informatique
    Inscrit en
    Décembre 2016
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Chercheur en informatique

    Informations forums :
    Inscription : Décembre 2016
    Messages : 39
    Points : 23
    Points
    23
    Par défaut
    merci Beginner, je me ré-explique
    Bon j'ai un tableau qui à 4 lignes à savoir :
    Nom : Capture.PNG
Affichages : 1258
Taille : 3,7 Ko

    maintenant je voudrais que lorsque je clique sur le bouton qui monte que la couleur unique monte à la ligne A3 B3 C3 D3

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    Ajoute une class avec javascript
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  7. #7
    Membre à l'essai
    Homme Profil pro
    Chercheur en informatique
    Inscrit en
    Décembre 2016
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Chercheur en informatique

    Informations forums :
    Inscription : Décembre 2016
    Messages : 39
    Points : 23
    Points
    23
    Par défaut
    Je ne te comprend pas SpaceFrog soit un-peu plus claire.
    j'ai modifier mon code et ça me donne ceci :
    Nom : Capture.PNG
Affichages : 1300
Taille : 22,2 Ko

    Mais ceci déplace plutôt la ligne

  8. #8
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  9. #9
    Membre à l'essai
    Homme Profil pro
    Chercheur en informatique
    Inscrit en
    Décembre 2016
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Chercheur en informatique

    Informations forums :
    Inscription : Décembre 2016
    Messages : 39
    Points : 23
    Points
    23
    Par défaut
    merci pour le lien SpaceFrog mais tu as omis les boutons pour monter et descendre de tel sorte que lorsque la ligne est déjà en rouge, en cliquant sur le bouton Monter (UP) que la couleur rouge monte sur la ligne suivante.

    encore une fois de plus merci

  10. #10
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  11. #11
    Membre à l'essai
    Homme Profil pro
    Chercheur en informatique
    Inscrit en
    Décembre 2016
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Chercheur en informatique

    Informations forums :
    Inscription : Décembre 2016
    Messages : 39
    Points : 23
    Points
    23
    Par défaut
    grand merci SpaceFrog c'est exactement ce que je voulais tu es un ange.
    mais s'il te plait tu peux mieux m'expliquer ton code pour que je puisse mieux comprendre
    s'il te plait merci !!!

  12. #12
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Voici un autre exemple : http://jsbin.com/pafeneluto/edit?js,output

    J'ai juste modifié ta fonction UpDown() et j'ai gardé tout le reste, tu devrais donc t'y retrouver...

  13. #13
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    $table=document.getElementById('table');
    $lines=$table.getElementsByTagName('tr');
    //$lines = collection des lignes de la table (tr)
    var selline=0; // variable globale indexe de la ligne selectionnée (initialisée à 0)
    ll=$lines.length;
     
     
    //fonction de déselection des autres lignes et coloration de la ligne selectionnée
    function swapsel(sl){
      l=-1;
    //on boucle sur toutes les lignes poru supprimer la class selline
      while($lines[++l]){
      $lines[l].classList.remove("selline");
       }
    //on affecte la class selline sur la ligne sélectionnée (avec son indexe sl)
     $lines[sl].classList.add('selline') ;
    }
     
    //descendre
    function down(){ 
    //si l'indexe de ligne est inférieur au max de ligne on rajoute 1 à l'indexe de ligne
    selline=(selline<3)?selline+1:3;
    //puis on lance la fcontion de coloration : décoloration
    swapsel(selline);
    }
     
    //monter
    function up(){ 
    //si l'indexe de ligne est superieur à 0 (min) on retanche 1 de l'indexe de ligne
    selline=(selline>0)?selline-1:0;
    //puis on lance la fcontion de coloration : décoloration
    swapsel(selline);
    }
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  14. #14
    Membre à l'essai
    Homme Profil pro
    Chercheur en informatique
    Inscrit en
    Décembre 2016
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Chercheur en informatique

    Informations forums :
    Inscription : Décembre 2016
    Messages : 39
    Points : 23
    Points
    23
    Par défaut
    grand merci Beginner c' est plus et je comprends mieux!!
    encore merci

  15. #15
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Merci SpaceFrog, je n'ai pas encore regardé ton code en détail, j'ai surtout testé et je note qu'on a plus la possibilité de cliquer sur une ligne da la table pour mettre sa couleur de fond en rouge... Ca correspond à ce passage :

    Citation Envoyé par romyney Voir le message
    J'ai problème sur mon tableau. en effet j'ai un tableau qui a 4 lignes et j'ai crée une fonction que lorsque je clique sur une ligne qu'une couleur de fond apparaisse, à ce niveau tout marche sans problème.
    Mais peut-être que romyney n'en a plus besoin...
    @romyney : peux-tu nous dire si tu en as toujours besoin ou pas ?

  16. #16
    Membre à l'essai
    Homme Profil pro
    Chercheur en informatique
    Inscrit en
    Décembre 2016
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Chercheur en informatique

    Informations forums :
    Inscription : Décembre 2016
    Messages : 39
    Points : 23
    Points
    23
    Par défaut
    merci SpaceFrog tu es génial mon problème est résolu

  17. #17
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    Si le click est toujours nécessaire, un mix des deux propositions avec l'appel à la même fonction swapsel() en tenant compte de l'indexe de la ligne cliquée et le tour est joué
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  18. #18
    Membre à l'essai
    Homme Profil pro
    Chercheur en informatique
    Inscrit en
    Décembre 2016
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Chercheur en informatique

    Informations forums :
    Inscription : Décembre 2016
    Messages : 39
    Points : 23
    Points
    23
    Par défaut
    c'est vrai Beginner c'est ce que je voulais, mais pour une amélioration c'est possible de sélectionner par défaut la première ligne. Et comme cela le reste du code ne change pas.

    j'ajoute à cela que lorsque mon tableau à une en-tête c'est à dire un thead, lorsque je clique sur les boutons le thead prend la couleur or il ne devrait pas

    merci d'avance !!

  19. #19
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    Si tu regardes le html de l'exemple ...
    regarde le premier tr ..
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  20. #20
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Citation Envoyé par romyney Voir le message
    j'ajoute à cela que lorsque mon tableau à une en-tête c'est à dire un thead, lorsque je clique sur les boutons le thead prend la couleur or il ne devrait pas
    Oui dans ce cas il y a des petites choses à modifier, c'est ce que tu veux ? Donnes-nous le html de ta table...

    Sinon l’intérêt aussi de passer par "rows" c'est que le code fonctionne même si tu modifies le nombre de lignes de la table...

    Citation Envoyé par romyney Voir le message
    c'est vrai Beginner c'est ce que je voulais, mais pour une amélioration c'est possible de sélectionner par défaut la première ligne. Et comme cela le reste du code ne change pas.
    Oui sélectionner par défaut la première ligne c'est possible et c'est ce qu'a fait SpaceFrog mais ensuite la question c'est est-ce que tu veux toujours la possibilité de cliquer sur une ligne de la table pour mettre sa couleur de fond en rouge ?

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. [ExtJS 3.2] Effet sur les Lignes d'un tableau (Editgrid)
    Par pitou26 dans le forum Ext JS / Sencha
    Réponses: 0
    Dernier message: 07/01/2013, 10h44
  2. trie tableau sur les lignes
    Par myriamulrik dans le forum Langage
    Réponses: 5
    Dernier message: 18/07/2011, 18h00
  3. [Tableaux] lien sur les lignes d'un tableau
    Par einsteineuzzz dans le forum Langage
    Réponses: 2
    Dernier message: 19/06/2006, 15h16
  4. changement de couleur sur les lignes d'un tableau
    Par brasco06 dans le forum XSL/XSLT/XPATH
    Réponses: 1
    Dernier message: 13/04/2006, 19h03
  5. Espacement entre les ligne d'un tableau
    Par Flobel dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 02/11/2004, 10h33

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo