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 :

Récupérer le numéro de ligne d'un table créé dynamiquement en JavaScript


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Femme Profil pro
    Développeuse Web et Mobile
    Inscrit en
    Août 2014
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 28
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Développeuse Web et Mobile
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Août 2014
    Messages : 30
    Points : 10
    Points
    10
    Par défaut Récupérer le numéro de ligne d'un table créé dynamiquement en JavaScript
    Bonjour,
    Cela fait plusieurs jours que je suis bloquée sur mon code pour un projet de stage.
    Je parse un fichier xml et je récupère mes données. Jusque là y a pas de soucis.
    Je dois ensuite les afficher dans un tableau html qui sera lui même dans un modal. J'affiche mes données y a pas de problème. Seulement, dans la dernière colonne de mon tableau il doit y avoir un bouton "+" qui au clic sur celui-ci appel une fonction qui prend en paramètre certaines colonnes du tableau.

    Voilà mon code html :
    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
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <body>
        <input id="SearchKeyword" name="SearchKeyword" type="text" class="form-control" value="" placeholder="Mot clé">
        <input class="btn btn-secondary" type="submit" value="Supprimer" onclick="deleteField();"><br/>
        <input class="btn btn-primary" data-toggle="modal" data-target="#myModalFicheWms" type="submit" onclick="removeElement();loadXMLDoc();" value="OK">
     
        <div id="myModalFicheWms" class="modal fade">
            <div id="modalWms" class="modal-dialog modal-lg">
     
                <div id="myModalWms" class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h1>Recherches Personnalisées</h1>
     
                    </div>
                    <div class="modal-body">
                        <div id="wms">
     
                        </div>
                    </div>
     
                    <div class="modal-footer">
     
                    </div>
                </div>
            </div>
        </div>
     
        <script type="text/javascript" src="script.js"></script>
     
        <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
     
     
        <script type="text/javascript" src="DataTables/js/jquery.dataTables.js"></script>
        <script src="bootstrap/js/bootstrap.js"></script>
     
    </body>

    Donc quand j'ouvre le modal ça m'appelle la fonction loadXMLDoc. Malheureusement je ne peuxt donner le lien du XML ni sont contenu mais voilà l'affichage de mon tableau :
    Nom : tableau.jpg
Affichages : 1627
Taille : 154,9 Ko

    PS: les codes suivants ne sont pas très propres. Je débute en JS et Jquery donc c'est comme ça me vient après une fois que mon code marche je les optimiserai. Merci de votre compréhension ^^
    Code javascript : 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
    function loadXMLDoc() {
        var keyword = document.getElementById('SearchKeyword').value;
        var pathXml = monurlXML 
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
     
                var fonctionTitre = recupTitle(this, "gmd:citation");
                var fonctionDateCreation = recupDateCreation(this, "gmd:citation");
                var fonctionDateRevision = recupDateRevision(this, "gmd:citation");
                var fonctionResume = recupAbstract(this, "gmd:abstract");
                var fonctionUrlKeyword = recupUrlKeyword(this, "gmd:CI_OnlineResource");
                var fonctionUrlVersion = recupUrlVersion(this, "gmd:CI_OnlineResource");
                console.log(fonctionResume);
                addTable(fonctionTitre, fonctionDateCreation, fonctionDateRevision, fonctionResume, fonctionUrlKeyword, fonctionUrlVersion);
                pagination();
     
            }
        };
        xmlhttp.open("GET", pathXml, true);
        xmlhttp.send();
    }

    C'est sur la fonction addTable que ça se bloque. En fait je crée mon tableau entièrement par le js et du coup mon bouton récupère tout le temps la première ligne peut importe sur quel bouton je clique dont voici le code :
    Code javascript : 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
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    function test(titre, keyword, version) {
        var contenu = "Titre: " + titre + "\nKeyword:" + keyword + "\nVersion: " + version;
    	console.log(contenu);
     
    }
     
    function addTable(tabTitre, tabDateCrea, tabDateRevis, tabResume, tabUrlKeyword, tabUrlVersion) {
        var myTableDiv = document.getElementById("wms"); //je récupère la div dans laquelle je vais mettre mon tableau
        var table = document.createElement('TABLE'); //je crée la balise table
        var tabHeader = ["Titre", "Date de Création", "Date de Révision", "Résumé", "Keyword", "Version", "Ajout Couche"]; //tableau des en-tête
        table.border = '1'; //je lui applique une bordure sur toute la table
        myTableDiv.className = "table table-responsive"; //je lui applique la class paleBlueRows du css
        table.id = "paleBlueRows";
        table.className = "datatable table table-striped table-bordered";
     
     
        //création de la balise thead et tr qui va contenir l'en-tête de chaque colonne
        var thead = document.createElement('THEAD');
        var trTitle = document.createElement('TR');
        thead.appendChild(trTitle);
        table.appendChild(thead);
     
        //remplissage des balises th du tableau
        for (var i = 0; i < tabHeader.length; i++) {
            var th = document.createElement('TH');
            th.appendChild(document.createTextNode(tabHeader[i])); //je mets dans les balises th le contenu du tableau d'en-tête
            trTitle.appendChild(th);
     
        }
        var tableBody = document.createElement('TBODY'); //création de l'élément body de la de table
     
        tableBody.width = '100%'; //le tableau va prendre toute la largeur de la div
        tableBody.id = "wmsTable";
        table.appendChild(tableBody);//j'ajoute l'élément tbody dans table 
     
        //remplissage des colonnes 
        for (var j = 0; j < tabDateCrea.length; j++) {
            //création des colonnes
            var tr = document.createElement('TR');
     
     
            var td = document.createElement('TD');
            td.id = "titre";
            td.appendChild(document.createTextNode(tabTitre[j]));
            tr.appendChild(td);
     
            var td2 = document.createElement('TD');
            td2.id = "dateCrea";
            td2.appendChild(document.createTextNode(tabDateCrea[j]));
            tr.appendChild(td2);
     
            var td3 = document.createElement('TD');
            td3.id = "dateRevis";
            td3.appendChild(document.createTextNode(tabDateRevis[j]));
            tr.appendChild(td3);
     
     
            var td4 = document.createElement('TD');
            td4.id = "resume";
            td4.appendChild(document.createTextNode(tabResume[j]));
            tr.appendChild(td4);
     
            var td5 = document.createElement('TD');
            td5.id = "keyword";
            td5.appendChild(document.createTextNode(tabUrlKeyword[j]));
            tr.appendChild(td5);
     
            var td6 = document.createElement('TD');
            td6.id = "version";
            td6.appendChild(document.createTextNode(tabUrlVersion[j]));
            tr.appendChild(td6);
     
     
            var tdButton = document.createElement('TD');
            tdButton.id = "couche";
            var button = document.createElement('button');
     
            button.type = "button";
            button.id = "btnAdd" + j;
            button.className = "btn btn-default btn-sm";
     
     
            var span = document.createElement('span');
            span.id = "plus";
            span.className = "glyphicon glyphicon-plus";
     
            button.onclick = function() {
                var indice = $(this).index();
                var trRow = tableBody.getElementsByTagName("tr")[indice];
     
                console.log(trRow);
                var mycelTitre = trRow.getElementsByTagName("td")[0].innerHTML; //récupère la collone des titres
     
                var mycelKeyword = trRow.getElementsByTagName("td")[4].innerHTML; //récupère la colonne des keywords
     
                var mycelVersion = trRow.getElementsByTagName("td")[5].innerHTML; //récupère la collone des versions
     
                test(mycelTitre, mycelKeyword, mycelVersion)
     
            };
            button.appendChild(span);
            tdButton.appendChild(button);
     
            tr.appendChild(tdButton);
     
            //on les cache car on ne veut pas les afficher mais on besoin de leur contenu
            $(td5).toggle(); //cache la colonne keyword
            $(td6).toggle(); //cache la colonne version
     
            tableBody.appendChild(tr);
     
        }
     
     
        myTableDiv.appendChild(table);
     
        var row = table.rows;
        var keyword = row[0].cells[4]; //récupère la cellule de la colonne Keyword
        var version = row[0].cells[5]; //récupère la cellule de la colonne version
         //on les cache car on ne veut pas les afficher mais on a besoin du contenu
        $(version).toggle(); //cache l'en-tête version
        $(keyword).toggle(); //cache l'en-tête keyword
     
    }

    Donc voilà je n'arrive pas à récupérer le numero de la ligne où se trouve le bouton. J'ai essayé je ne sais combien de code mais il n'y a rien qui fonctionne. S'il y a quelqu'un qui aurait une solution ou m'expliquer pourquoi cela ne fonctionne pas, je suis preneuse car je désespère là.
    Merci d'avance et désolée pour le pavé ^^

  2. #2
    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
    Avec Jquery il existe une méthode index() ...

    Sinon il faut mettre un flag sur la ligne ou un data-line par exemple sur le bout on...
    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 !

  3. #3
    Membre à l'essai
    Femme Profil pro
    Développeuse Web et Mobile
    Inscrit en
    Août 2014
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 28
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Développeuse Web et Mobile
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Août 2014
    Messages : 30
    Points : 10
    Points
    10
    Par défaut Récupérer le numéro de ligne d'un table créé dynamiquement en JavaScript
    J'ai utilisé cette fonction à la ligne 88 du dernier code mais malheureusement cela me récupère toujours la première ligne.
    Merci je vais chercher du côté des flags.

  4. #4
    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
    Non je parlais de JQUERY ...

    Sinon à la construction de ton tableau colle un data-line sur les tr ou sur les boutons ...
    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 !

  5. #5
    Membre à l'essai
    Femme Profil pro
    Développeuse Web et Mobile
    Inscrit en
    Août 2014
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 28
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Développeuse Web et Mobile
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Août 2014
    Messages : 30
    Points : 10
    Points
    10
    Par défaut
    Ok merci je vais regarder ça

  6. #6
    Membre à l'essai
    Femme Profil pro
    Développeuse Web et Mobile
    Inscrit en
    Août 2014
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 28
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Développeuse Web et Mobile
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Août 2014
    Messages : 30
    Points : 10
    Points
    10
    Par défaut
    Bon finalement comme le index ne fonctionnait pas j'ai fini par réussir à bidouiller un truc.
    Comme l'id du bouton est incrémentée de 1 à chaque fois je récupère l'indice à la fin de l'id du bouton pour avoir le numéro de la ligne comme ceci :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    button.onclick = function() {
    	            var id = this.id;
    	            var idButton = id.substring(6);
    	            var trRow = tableBody.getElementsByTagName("tr")[idButton];
    	            var mycelTitre = trRow.getElementsByTagName("td")[1].innerHTML; //récupère la collone des titres
     
    	            var mycelKeyword = trRow.getElementsByTagName("td")[5].innerHTML; //récupère la colonne des keywords
     
    	            var mycelVersion = trRow.getElementsByTagName("td")[6].innerHTML; //récupère la collone des versions
    	            test(mycelTitre, mycelKeyword, mycelVersion)
    	        }

    Et du coup j'ai bien l'affichage de chaque ligne comme voulu ^^

  7. #7
    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
    var idButton = id.substring(6);
    en espérant que ton numéro de ligne ne dépasse pas un chiffe ...

    sinon tu peux passer par une regexp pour récupérer le numérique.

    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 !

  8. #8
    Membre à l'essai
    Femme Profil pro
    Développeuse Web et Mobile
    Inscrit en
    Août 2014
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 28
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Développeuse Web et Mobile
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Août 2014
    Messages : 30
    Points : 10
    Points
    10
    Par défaut
    Je modifierai ça merci.

    Par contre je viens de voir un autre problème. mon tableau peut s'afficher sur plusieurs pages comment je peux faire pour qu'il se remette à zero si change de page ?
    la seule solution qui me vient c'est de tester l'id si il est supérieur à 4 (limite de mon affichage) alors ça réinitialise l'indice à 0

  9. #9
    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 as le même nombre de lignes par page passe par le modulo ...
    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 !

  10. #10
    Membre à l'essai
    Femme Profil pro
    Développeuse Web et Mobile
    Inscrit en
    Août 2014
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 28
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Développeuse Web et Mobile
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Août 2014
    Messages : 30
    Points : 10
    Points
    10
    Par défaut
    oui j'en aurai toujours 5 qui s'afficheront par page (0 à 4)



    Edit: Du coup j'ai fais comme ça :

    Code javascript : 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
     
    button.onclick = function() {
    	            // var idButton = id.substring(6);
    	            var id = this.id; //permet de récupérer l'indice de l'élément cliqué
    	            var idButton = id.match(/\d+/); //dans le cas où l'indice dépasse le chiffre
    	            if (idButton > 4) {
    	                idButton = idButton % 5;
    	            }
    	            var trRow = tableBody.getElementsByTagName("tr")[idButton];
    	            var mycelTitre = trRow.getElementsByTagName("td")[1].innerHTML; //récupère la collone des titres
     
    	            var mycelKeyword = trRow.getElementsByTagName("td")[5].innerHTML; //récupère la colonne des keywords
     
    	            var mycelVersion = trRow.getElementsByTagName("td")[6].innerHTML; //récupère la collone des versions
    	            test(mycelTitre, mycelKeyword, mycelVersion)
     
    	        }

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Python 3.X] Comment récupérer le numéro de ligne en cours d’exécution dans le script
    Par campeaux dans le forum Général Python
    Réponses: 5
    Dernier message: 04/02/2017, 13h19
  2. [DATA] Comment récupérer les n prochaines lignes d'une table SAS
    Par mac123 dans le forum SAS Base
    Réponses: 2
    Dernier message: 16/01/2017, 10h58
  3. Comment récupérer les numéros de ligne/colonne d'une plage
    Par Val2000 dans le forum Macros et VBA Excel
    Réponses: 10
    Dernier message: 18/07/2013, 17h56
  4. Comment récupérer le numéro de ligne d'un bug ?
    Par vbnet3 dans le forum NetBeans
    Réponses: 3
    Dernier message: 27/06/2011, 15h06

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