Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1567 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Modification du contenu d'une page en js

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Modification du contenu d'une page en js

n°286032
MarvinLeRo​uge
In Colt We Trust
Posté le 14-01-2003 à 15:24:04  profilanswer
 

Salut,  
 
J'ai un pb. Dans une page, j'ai :  
- des données brutes déjà chargées  
- des critères de choix  
- un tableau qui doit contenir le résultat du filtrage des données brutes par mes critères de choix  
 
Si vous préférez, j'ai un moteur de recherche et le tableau de résultats dans la même page.  
 
Mon problème est le suivant :  
- Je sais comment stocker mes données brutes sous forme de tableaux dans la page  
- je sais aussi comment calculer un tableau correspondant aux données filtrées par les critères  
- En revanche, je ne sais pas comment créer un tableau html (avec des liens) en javascript et écrire le code de ce tableau dans la page pour que ledit tableau soit modifié "en live" quand la personne change ses critères.


---------------
Dans le monde, il n'y a que 10 sortes de personnes : ceux qui savent compter en binaire et ceux qui ne savent pas
mood
Publicité
Posté le 14-01-2003 à 15:24:04  profilanswer
 

n°286071
walli
Posté le 14-01-2003 à 15:59:46  profilanswer
 

MarvinLeRouge a écrit :

Salut,  
 
J'ai un pb. Dans une page, j'ai :  
- des données brutes déjà chargées  
- des critères de choix  
- un tableau qui doit contenir le résultat du filtrage des données brutes par mes critères de choix  
 
Si vous préférez, j'ai un moteur de recherche et le tableau de résultats dans la même page.  
 
Mon problème est le suivant :  
- Je sais comment stocker mes données brutes sous forme de tableaux dans la page  
- je sais aussi comment calculer un tableau correspondant aux données filtrées par les critères  
- En revanche, je ne sais pas comment créer un tableau html (avec des liens) en javascript et écrire le code de ce tableau dans la page pour que ledit tableau soit modifié "en live" quand la personne change ses critères.
 


 
tu as essaye avec un model et un controleur ?

n°286076
MarvinLeRo​uge
In Colt We Trust
Posté le 14-01-2003 à 16:03:02  profilanswer
 

Moi y en a pas comprendre quoi toi y en a dire missié :ouch:  :whistle:


---------------
Dans le monde, il n'y a que 10 sortes de personnes : ceux qui savent compter en binaire et ceux qui ne savent pas
n°286080
walli
Posté le 14-01-2003 à 16:08:02  profilanswer
 

MarvinLeRouge a écrit :

Moi y en a pas comprendre quoi toi y en a dire missié :ouch:  :whistle:  


 
tu utilises simplement une page html, ou t'as d'autres fichiers ?

n°286089
gm_superst​ar
Appelez-moi Super
Posté le 14-01-2003 à 16:12:34  profilanswer
 

Tu devrais arriver à faire ça avec DOM et les fonctions appendChild()/createElement()
 
L'idée est de récupérer un objet Element qui représente ton tableau HTML :
 
tablo = document.getElementById("monTabelau" );
(en supposant que le tableau est attribut id="monTableau" )
 
puis d'ajouter à ce tableau lignes et cellules :
 

Code :
  1. /*On met là dedans les données que tu veux afficher*/
  2. donnees1 = document.createTextNode("données 1" );
  3. donnees1 = document.createTextNode("données 2" );
  4. /*Création des cellules*/
  5. cellule1 = document.createElement("td" );
  6. cellule2 = document.createElement("td" );
  7. /*Création de la ligne*/
  8. ligne = document.createElement("tr" );
  9. /*On ajoute les éléments les uns aux autres*/
  10. cellule1.appendChild(donnees1);
  11. cellule2.appendChild(donnees2);
  12. ligne.appendChild(cellule1);
  13. ligne.appendChild(cellule2);
  14. tablo.appendChild(ligne);


 
Et la ligne est ajoutée à la fin du tableau.
 
Voir la doc : http://www.mozilla.org/docs/dom/do [...] ml#1023967 (c'est pour Mozilla mais ça devrait marcher avec IE ou alors en adaptant un peu)


Message édité par gm_superstar le 14-01-2003 à 16:13:35

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°286107
MarvinLeRo​uge
In Colt We Trust
Posté le 14-01-2003 à 16:26:39  profilanswer
 

addElement apparemment, c'est du DHTML :(


---------------
Dans le monde, il n'y a que 10 sortes de personnes : ceux qui savent compter en binaire et ceux qui ne savent pas
n°286110
gm_superst​ar
Appelez-moi Super
Posté le 14-01-2003 à 16:28:08  profilanswer
 

1. DHTML n'existe pas. C'est juste un terme marketing pour désigner l'association de DOM + JavaScript
2. En quoi est-ce un problème de l'utiliser ?


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°286114
walli
Posté le 14-01-2003 à 16:31:36  profilanswer
 

gm_superstar a écrit :

Tu devrais arriver à faire ça avec DOM et les fonctions appendChild()/createElement()
 
L'idée est de récupérer un objet Element qui représente ton tableau HTML :
 
tablo = document.getElementById("monTabelau" );
(en supposant que le tableau est attribut id="monTableau" )
 
puis d'ajouter à ce tableau lignes et cellules :
 

Code :
  1. /*On met là dedans les données que tu veux afficher*/
  2. donnees1 = document.createTextNode("données 1" );
  3. donnees1 = document.createTextNode("données 2" );
  4. /*Création des cellules*/
  5. cellule1 = document.createElement("td" );
  6. cellule2 = document.createElement("td" );
  7. /*Création de la ligne*/
  8. ligne = document.createElement("tr" );
  9. /*On ajoute les éléments les uns aux autres*/
  10. cellule1.appendChild(donnees1);
  11. cellule2.appendChild(donnees2);
  12. ligne.appendChild(cellule1);
  13. ligne.appendChild(cellule2);
  14. tablo.appendChild(ligne);


 
Et la ligne est ajoutée à la fin du tableau.
 
Voir la doc : http://www.mozilla.org/docs/dom/do [...] ml#1023967 (c'est pour Mozilla mais ça devrait marcher avec IE ou alors en adaptant un peu)


 
ca ferait pas moins 'lourd de code' d'externaliser le script dans un fichier pour pouvoir gerer le dynamisme du tableau en fonctions des criteres selectionnes ?  :??:

n°286123
gm_superst​ar
Appelez-moi Super
Posté le 14-01-2003 à 16:38:40  profilanswer
 
n°286128
walli
Posté le 14-01-2003 à 16:40:39  profilanswer
 


 
mettre en place un model-vue-controleur par ex...

mood
Publicité
Posté le 14-01-2003 à 16:40:39  profilanswer
 

n°286133
gm_superst​ar
Appelez-moi Super
Posté le 14-01-2003 à 16:43:06  profilanswer
 
n°286166
MarvinLeRo​uge
In Colt We Trust
Posté le 14-01-2003 à 17:06:20  profilanswer
 

>gm_superstar :
OK pour le DHTML. Il me semblait qu'il y avait des spécificités DOM IE dedans (Tu ne trouveras pas 2 browsers qui implémente exactement la même DOM :( )
 
>walli :
1) J'avais bien l'intention d'externaliser le code
2) Qu'appelles-tu "un model-vue-controleur" ?


---------------
Dans le monde, il n'y a que 10 sortes de personnes : ceux qui savent compter en binaire et ceux qui ne savent pas
n°286177
walli
Posté le 14-01-2003 à 17:14:52  profilanswer
 


Dans ton appli tu mets en place :  
- Un « modèle » permettant de mémoriser le contexte de l?application, et le résultat du filtrage des données brutes par mes critères de choix  
- Un « Contrôleur » dont le rôle est de gérer la mise à jour du modèle,
- Des vues constituées par les différentes pages html autrement dit principalement ton tableau.
 
Principe :  
1. Lorsque l?utilisateur modifie la valeur d?un champ de saisie, celui-ci notifie au contrôleur son changement.
2. Le contrôleur met alors à jour les éléments du modèle impactés par la nouvelle saisie.
3. Le modèle met alors à jour la vue.
 


Message édité par walli le 14-01-2003 à 17:15:24
n°286201
MarvinLeRo​uge
In Colt We Trust
Posté le 14-01-2003 à 17:46:23  profilanswer
 

Ben en fait, c'est c que je veux faire, mais on utilisait pas le même langage :
 
- mes données correspondant au tableau sont chargées au départ et stockées sous forme de tableaux
- lorsqu'un critère est modifié, ca déclenche une fonction javascript qui calcule le tableau résultant des données brutes filtrées par les critères
- puis le tableau HTML contenu dans la page est mis à jour avec les nouvelles données


---------------
Dans le monde, il n'y a que 10 sortes de personnes : ceux qui savent compter en binaire et ceux qui ne savent pas
n°286207
walli
Posté le 14-01-2003 à 17:49:19  profilanswer
 

MarvinLeRouge a écrit :

Ben en fait, c'est c que je veux faire, mais on utilisait pas le même langage :
 
- mes données correspondant au tableau sont chargées au départ et stockées sous forme de tableaux
- lorsqu'un critère est modifié, ca déclenche une fonction javascript qui calcule le tableau résultant des données brutes filtrées par les critères
- puis le tableau HTML contenu dans la page est mis à jour avec les nouvelles données


 
il te manques quoi alors ?

n°286315
MarvinLeRo​uge
In Colt We Trust
Posté le 14-01-2003 à 20:39:29  profilanswer
 

Ben la façon de modifier le tableau html en live.
 
Bon plus maintenant : j'ai eu la base de la méthode par vos réponses et j'ai trouvé sur le site de mozilla un article pile sur le sujet
 
Donc je pense que ca devrait aller


---------------
Dans le monde, il n'y a que 10 sortes de personnes : ceux qui savent compter en binaire et ceux qui ne savent pas
n°287068
MarvinLeRo​uge
In Colt We Trust
Posté le 15-01-2003 à 20:35:36  profilanswer
 

Y'a comme un pb.
J'arrive à créer le contenu du tableau à partir de rien.
Par contre, quand j'efface récursivement tous les noeuds du tableau, il n'y a pas d'erreur, mais la structure du tableau est toujours là après, bien que toutes les cases soient vides.


---------------
Dans le monde, il n'y a que 10 sortes de personnes : ceux qui savent compter en binaire et ceux qui ne savent pas
n°287112
gm_superst​ar
Appelez-moi Super
Posté le 15-01-2003 à 22:14:50  profilanswer
 
n°287282
MarvinLeRo​uge
In Colt We Trust
Posté le 16-01-2003 à 09:36:00  profilanswer
 

J'utilise la méthode removeChild, via un appel à ma méthode viderTableau. Code ci-joint :
 

Citation :

var monTableau = document.getElementById ("maTable" );
 
function effaceTabNoeud (pere, tableauNoeud)
{
var i, noeudCourant, str;
 
str = "";
str+= "effacement dans " + pere.nodeName + " " + pere.nodeValue + " des enfants " + tableauNoeud + "\n";
for (i = 0; i < tableauNoeud.length; i++)
{
 noeudCourant = tableauNoeud [i];
 if (noeudCourant.hasChildNodes ())
 {
  str+= "Le noeud " + noeudCourant.nodeName + " " + noeudCourant.nodeValue + " enfant de " + pere.nodeName + " " + pere.nodeValue + " a des enfants\n";
  str+= effaceTabNoeud (noeudCourant, noeudCourant.childNodes);
 }
 else
 {
  str+= "Le noeud " + noeudCourant.nodeName + " " + noeudCourant.nodeValue + " enfant de " + pere.nodeName + " " + pere.nodeValue + " n'a pas d'enfants, donc on le tue\n";
  pere.removeChild (noeudCourant);
 }
}
 
return str;
}
 
function effaceNoeud (nomDuNoeud)
{
alert ("effaceNoeud (" + nomDuNoeud.nodeName + " " + nomDuNoeud.nodeValue + " )" );
alert (effaceTabNoeud (nomDuNoeud, nomDuNoeud.childNodes));
}
 
function viderTableau ()
{
alert ("viderTableau" );
effaceNoeud (monTableau);
}



---------------
Dans le monde, il n'y a que 10 sortes de personnes : ceux qui savent compter en binaire et ceux qui ne savent pas
n°287311
fastclemmy
(re-)Dictateur en plastique
Posté le 16-01-2003 à 09:59:12  profilanswer
 
n°287349
walli
Posté le 16-01-2003 à 10:13:24  profilanswer
 

tu as essaye de mettre ton tableau dans une div ?
ainsi, lorsque tu as au moins une donnee dans ton tableau, tu le met en visible = true, et sinon, en visible = false
c'est ptet un peu bourrin, mais ca marche pas trop mal...  
 
et puis tot le matin, faut pas trop me demander de reflechir... :pt1cable:  
 
 

n°287377
MarvinLeRo​uge
In Colt We Trust
Posté le 16-01-2003 à 10:24:19  profilanswer
 

Je ne cherche pas à le rendre visible ou invisible.
 
Mon problème, c'est que comme la structure n'est pas détruite, quand je re-remplis le tableau, ca laisse visiblement un espace au dessus des données, espace dû aux cases vides toujours calculées.


---------------
Dans le monde, il n'y a que 10 sortes de personnes : ceux qui savent compter en binaire et ceux qui ne savent pas
n°287403
youdontcar​e
Posté le 16-01-2003 à 10:39:58  profilanswer
 

remplace  

MarvinLeRouge a écrit :

effaceNoeud (monTableau);

par
monTableau.parentNode.removeChild(monTableau);

n°287417
walli
Posté le 16-01-2003 à 10:49:29  profilanswer
 

youdontcare a écrit :

remplace  
par
monTableau.parentNode.removeChild(monTableau);


 
oui ca evitera l'espace au dessus de ses donnees.

n°287478
MarvinLeRo​uge
In Colt We Trust
Posté le 16-01-2003 à 11:33:12  profilanswer
 

Nan c'est pas bon.
 
1) Je ne veux pas détruire le tableau. Et ceci afin d'être bien sûr de le retrouver à la même place
 
2) Mon problème ne vient pas du node TABLE. A l'ouverture de ma page, il n'y a que ce node et le remplissage se passe très bien.
Mon problème vient de la persistance des noeuds enfants de TABLE. Quand je fais monTableau.removeChild (unDeSesEnfants), je n'ai pas d'erreur, mais toute la structure du tableau est toujours là après.


---------------
Dans le monde, il n'y a que 10 sortes de personnes : ceux qui savent compter en binaire et ceux qui ne savent pas
n°287508
gm_superst​ar
Appelez-moi Super
Posté le 16-01-2003 à 12:11:10  profilanswer
 

Quel enfant est-ce que tu retires ? Je viens d'essayer rapidement et si j'enlève une ligne (tr) la ligne disparait du tableau (elle ne s'affiche plus)
 
Essaye aussi de t'aider du DOM inspector de Mozilla, ça te permettra de vérifier que l'arborescence de ton document est bien celle que tu attends.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°287559
youdontcar​e
Posté le 16-01-2003 à 12:54:13  profilanswer
 

MarvinLeRouge a écrit :

1) Je ne veux pas détruire le tableau. Et ceci afin d'être bien sûr de le retrouver à la même place

il y a insertBefore() pour ça. ou tu peux le mettre en fils unique d'une node, c'est largement plus simple que ta méthode récursive, où la récursivité est d'ailleurs inutile car removeChild() fait déjà le boulot nécessaire.  
 
pour le debug, tu peux aussi mettre une bordure à ta table / tes <td> pour voir si les cellules sont toujours là.

n°287683
MarvinLeRo​uge
In Colt We Trust
Posté le 16-01-2003 à 15:22:47  profilanswer
 

J'ai trouvé !
 
C'est un problème d'indice à la con (il est vrai qu'une fois qu'on a trouvé c'est TOUJOURS un problème à la con).
Ce n'est pas mon effacement récursif qui est en cause, c'est l'effacement des fils d'un noeud donné.
J'utilise pour ca une boucle qui apparemment, comme elle est croissante, essaie d'effacer des noeuds qui n'existent plus (ou qqch dans ce style).
 
Une autre méthode est :

Citation :

while (pere.hasChildNodes ())
  pere.removeChild (pere.firstChild);


 
Et là ca marche nickel :bounce:  
 
En plus, si le removeChild fait bien lui même la récursivité (ce qui n'est pas indiqué dans le document du W3C http://www.w3.org/TR/2000/REC-DOM- [...] /core.html :heink: ), il suffit de le faire sur les enfants de monTableau :D  
 
Merci les mecs :hello:


---------------
Dans le monde, il n'y a que 10 sortes de personnes : ceux qui savent compter en binaire et ceux qui ne savent pas
n°287688
walli
Posté le 16-01-2003 à 15:28:01  profilanswer
 

MarvinLeRouge a écrit :


 
Merci les mecs :hello:  


 
 :jap:  
 

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Modification du contenu d'une page en js

 

Sujets relatifs
[java] gestionnaire de mise en page : connaitre la ligne-colonnesy'a t'il moyen de voir le contenu d'un bios et de le modifier?
mot de passe à l'ouverture d'une page ?Afficher le contenu d'une page en un seul coup ?
addresse de la page precendent la page phprecuperer une page WEB en chaine de caracteres
afficher une page web en restant compatible avec kylixRediriger vers une page en PHP
Mise en page avec des <div> 
Plus de sujets relatifs à : Modification du contenu d'une page en js


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR