Tableau et données html

Version imprimable

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:

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>

16/05/2018, 10h29
danielhagnoul

:salut:

Code:

<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>.
16/05/2018, 22h00
bonjourajax

C'est du jsf t'es pas au bon endroit
https://www.tutorialspoint.com/jsf/j...uttext_tag.htm
16/05/2018, 23h21
ProgElecT

Salut

En français sur DVP
:fleche: Forum Frameworks Web JSF
:fleche: FAQ JSF
17/05/2018, 06h43
denisduval75

Bonjour,
Mon problème ne concerne pas JSF mais bien JS.
Merci
17/05/2018, 13h15
bonjourajax

Bonjour,

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

html
output
js

Quelque soit le projet, l'ensemble du code ne va pas ensemble
17/05/2018, 16h46
denisduval75

J'avais posté dans la section JS mais il a été déplacé malgré moi!
17/05/2018, 18h23
NoSmoking

Bonjour,
comme il me semble te l'avoir déjà signifier il faut mettre le code HTML généré ^(*)et non le code serveur, javascript travaillant, dans ce cas coté client ,il ne « verra » que du HTML.

Prend l'habitude de regarder le code généré il est souvent révélateur des soucis rencontrés.

En faisant

Code:

var t = [document.getElementById("t1"), document.getElementById("t2"), document.getElementById("t3")];

j'aimerais savoir se que tu comptes obtenir, dans la mesure où le script est au bon endroit ?

^(*) accessoirement tes sujets ne seront plus déplacés ;)
17/05/2018, 18h58
bonjourajax

Si il s'agit uniquement de javascript alors tu as tous les liens pour mener à bien ton projet
17/05/2018, 19h17
denisduval75
Je souhaite utiliser l'API Google Chart pour réaliser des graphiques.
Pour cela j'ai besoin de récupérer en JS les 18 champs années et 18 champs montants qui se trouvent tous sur une page XHTML.

Je pourrais faire quelque chose comme ça :

Code:

var data = [document.getElementById('annee01').innerHTML, parseFloat(document.getElementById('valeur01').innerHTML)......................]

Sauf que je préfèrerais une solution du genre :

Code:

var data = document.getElementById('idDeMaTableHTMLDansLaquelleJaiPlaceMes36Valeurs').innerHTML;

pour enfin pouvoir utiliser son contenu avec (c'est pas moi qui le dit mais les tutos!) :
Code:

1 2 3 4 var annee01 = data[0] ... qui correspond à la 1ère occurence du tableau var montant01 = parseFloat(data[1]) ... pour l'occurence suivante etc ...
17/05/2018, 19h31
bonjourajax

Bonjour,
c'est faisable mais quel est le code de ta page xhtml
17/05/2018, 19h33
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
17/05/2018, 19h37
bonjourajax
C'est déja une belle avancée, on est passé du
Code:

1 2 <a:outputText>
au c'est une page xhtml

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

JS

Code:

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

HTML

Code:

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>

17/05/2018, 23h20
danielhagnoul

:calim2:

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.

Citation:

Envoyé par danielhagnoul

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

certes mais on y est presque :mouarf:

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:

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:

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 !

Citation:

Envoyé par denisduval75

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 !