Discussion :

[denisduval75]

Bonjour,

Je cherche à récupérer dans un tableau JS des valeurs d'une page xhtml.
Mais lors de l'affichage de la 1ère valeur du tableau, celui-ci semble vide ; j'ai le message : 'null'.
Merci pour votre aide.

Mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
                <h:outputText id="t1" value="a"/>
                <h:outputText id="t2" value="b"/>
                <h:outputText id="t3" value="c"/>
 
                <script>
                    var t = [document.getElementById("t1"), document.getElementById("t2"), document.getElementById("t3")];
                    alert(t[0]);
                </script>

[danielhagnoul]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<h:outputText id="t1" value="a"/>

C'est une langue étrangère, pas du HTML.

Cela me fait penser à l'élément HTML <output id="t1"></output>.

[bonjourajax]

C'est du jsf t'es pas au bon endroit
https://www.tutorialspoint.com/jsf/j...uttext_tag.htm

[ProgElecT]

Salut

En français sur DVP
Forum Frameworks Web JSF
FAQ JSF

[denisduval75]

Bonjour,
Mon problème ne concerne pas JSF mais bien JS.
Merci

[bonjourajax]

Bonjour,

Tu postes dans la section html , un code mélangeant de tout sauf du html

html
output
js

Quelque soit le projet, l'ensemble du code ne va pas ensemble

[danielhagnoul]

On n'avait vraiment aucune chance de comprendre la question posée dans le message n° 1 !

Sans un extrait de 'MaTableHTMLDansLaquelleJaiPlaceMes36Valeurs' (code HTML généré) il faut toujours une boule de cristal !

On ne peut pas deviner la structure de vos TD, ni savoir si votre table est bien formée.

Essayer toujours .textContent au lieu de .innerHTML

[bonjourajax]

C'est déja une belle avancée, on est passé du

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a:outputText>

au c'est une page xhtml

[denisduval75]

Mon code modifié (mais pas mieux avec textContent) :

JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var data = [document.getElementById('tbl').textContent]; alert(data[0]);

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
37
38
<table id="tbl" style="display: none">
                            <td id="annee01">#{contributeurManagerBean.listeColonneAnnee.get(0)}</td>
                            <td id="valeur01">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(0))}</td>
                            <td id="annee02">#{contributeurManagerBean.listeColonneAnnee.get(1)}</td>
                            <td id="valeur02">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(1))}</td>
                            <td id="annee03">#{contributeurManagerBean.listeColonneAnnee.get(2)}</td>
                            <td id="valeur03">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(2))}</td>
                            <td id="annee04">#{contributeurManagerBean.listeColonneAnnee.get(3)}</td>
                            <td id="valeur04">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(3))}</td>
                            <td id="annee05">#{contributeurManagerBean.listeColonneAnnee.get(4)}</td>
                            <td id="valeur05">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(4))}</td>
                            <td id="annee06">#{contributeurManagerBean.listeColonneAnnee.get(5)}</td>
                            <td id="valeur06">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(5))}</td>
                            <td id="annee07">#{contributeurManagerBean.listeColonneAnnee.get(6)}</td>
                            <td id="valeur07">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(6))}</td>
                            <td id="annee08">#{contributeurManagerBean.listeColonneAnnee.get(7)}</td>
                            <td id="valeur08">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(7))}</td>
                            <td id="annee09">#{contributeurManagerBean.listeColonneAnnee.get(8)}</td>
                            <td id="valeur09">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(8))}</td>
                            <td id="annee10">#{contributeurManagerBean.listeColonneAnnee.get(9)}</td>
                            <td id="valeur10">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(9))}</td>
                            <td id="annee11">#{contributeurManagerBean.listeColonneAnnee.get(10)}</td>
                            <td id="valeur11">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(10))}</td>
                            <td id="annee12">#{contributeurManagerBean.listeColonneAnnee.get(11)}</td>
                            <td id="valeur12">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(11))}</td>
                            <td id="annee13">#{contributeurManagerBean.listeColonneAnnee.get(12)}</td>
                            <td id="valeur13">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(12))}</td>
                            <td id="annee14">#{contributeurManagerBean.listeColonneAnnee.get(13)}</td>
                            <td id="valeur14">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(13))}</td>
                            <td id="annee15">#{contributeurManagerBean.listeColonneAnnee.get(14)}</td>
                            <td id="valeur15">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(14))}</td>
                            <td id="annee16">#{contributeurManagerBean.listeColonneAnnee.get(15)}</td>
                            <td id="valeur16">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(15))}</td>
                            <td id="annee17">#{contributeurManagerBean.listeColonneAnnee.get(16)}</td>
                            <td id="valeur17">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(16))}</td>
                            <td id="annee18">#{contributeurManagerBean.listeColonneAnnee.get(17)}</td>
                            <td id="valeur18">#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(17))}</td>
                        </table>

[danielhagnoul]

On n'est toujours pas rendu au code HTML généré !

#{contributeurManagerBean.calculerMontantTotalGeneral(contributeurManagerBean.listeColonneAnnee.get(0))} c'est du code serveur !

Ce n'est pourtant pas difficile : vous affichez la page web, un clic droit sur la page et choisir "Afficher le code source de la page. Dans la page qui s'ouvre, copier-coller la partie du code qui représente la table.

[NoSmoking]

On n'est toujours pas rendu au code HTML généré !

certes mais on y est presque

Essayons de faire avancer le Schmilblic.

Tu peux parcourir toutes les cellules de ta <table> pour en récupérer les valeurs, donc pas besoin de mettre une ID à chaque cellules.

Une façon de procéder en utilisant les collection rows et cells

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
// récupération de l'élément
var oTable = document.querySelector("#tbl");
var lig;
var col;
var oRow;
var nbCells;
var nbRows = oTable.rows.length;
// parcours des lignes de la table
for (lig = 0; lig < nbRows; lig += 1) {
  oRow = oTable.rows[lig];
  nbCells = oRow.cells.length;
  // parcours des cellules d'une ligne
  for (col = 0; col < nbCells; col += 1) {
    // récupération des données
    console.log(oRow.cells[col].textContent);
  }
}

il te reste à mettre les données dans tes tableaux pour exploitation.

Nota : il doit bien être possible côté serveur de générer ces tableaux directement dans une balise <script> pour obtenir quelque chose comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var dates = ["2018-01-01", "2018-01-02", "2018-01-03", ...];
var valeurs = [151, 147, 25, 45, ...];

il me semble que cela serait quand même le mieux !


PS : ton autre question récente semble concerner en fait le même problème merci de ne pas dupliquer tes questions mais de prendre soins de bien répondre aux questions/remarques qui te sont posées/faites !

var data = [document.getElementById('tbl').textContent]; alert(data[0]);

As tu pris le temps de regarder la réponse faite dans ton autre discussion, j'en doute !