begin process at 2012 05 30 04:54:07
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript Orienté objet (POO)

 > 

Classes

 > 

stocker objet javascript dans noeud DOM

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

stocker objet javascript dans noeud DOM

mercredi 25 février 2009 à 20:48:43 | stocker objet javascript dans noeud DOM

Guillemouze
salut a tous.
J'ai plusieurs solutions possibles a mon problème, mais je ne sais pas si elles sont faisables en javascript.

Alors voila l'histoire :
j'ai un array qui contient plusieurs objets.
Je veux construire une table html avec une ligne pour chaque objet de cet array.
Le but est que je puisse, lors du click sur une des lignes de la table, faire un traitement sur l'objet qui m'a servi a creer la ligne.

Les solutions auxquelles j'ai pensé sont les suivantes :
proposition 1:
stocker directement l'objet dans le noeud <TR>. Est-ce possible ? je ne crois pas qu'il soit possible d'integrer une variable complexe (classe).
proposition 2:
creer une classe heritee de HTMLTableRowElement qui contiendrai mon objet, et utiliser cette classe pour faire les noeuds de ma table, mais je ne crois pas qu'il soit possible de faire de l'heritage en javascript.
proposition 3:
stocker dans la ligne de la table un id correspondant a l'index de l'objet dans mon array (ma solution de dernier recours). Dans ce cas, quelle est la "meilleure" maniere? un input hidden? un noeud perso du style "<RowId value='idx_dans_le_array'>" ? un attribut perso dans le noeud TR ? ...

merci pour vos reponses / idees / remarques.

PS: ca fait tres longtemps que j'ai pas fait de javascript, et j'ai rarement developpé en POO JS.
jeudi 26 février 2009 à 19:44:56 | Re : stocker objet javascript dans noeud DOM

PetoleTeam

Membre Club
Bonjour,
...mais je ne sais pas si elles sont faisables en javascript
la meilleur façon de savoir c'est d'essayer, on apprend énormement comme cela...
...un array qui contient plusieurs objets
c'est assez vague...
stocker directement l'objet dans le noeud <TR>. Est-ce possible ? je ne crois pas qu'il soit possible d'integrer une variable complexe (classe).
tu n'as de variable complexe dans les balises <TD> contenues entre les balises <TR>, c'est du HTML avec toutes ses possibilités
mais je ne crois pas qu'il soit possible de faire de l'heritage en javascript
c'est le principe de la POO
...
plus pragmatiquement, sans plus d'info sur les objets que tu veux manipuler difficile de te répondre.
;O)
jeudi 26 février 2009 à 22:36:45 | Re : stocker objet javascript dans noeud DOM

Guillemouze
"c'est le principe de la POO"
heuuu j'ai peur de dire une connerie mais j'ai l'impression que la POO en javascript, c'est pas ce qu'on fait de plus "OO" ! notament en ce qui concerne l'heritage, comme le montre ce post
"plus pragmatiquement, sans plus d'info sur les objets que tu veux manipuler difficile de te répondre."
je ne pense pas que connaitre les objets a manipuler ai grand interet ici, il faut juste savoir que ce sont des objets et pas des variables ordinales.
 Bref, en gros, j'ai une classe du genre

function maClasse(c1, ..., cN) {...}
maClasse.prototype.champ1;
...
 maClasse.prototype.champN;
 maClasse.prototype.getCaption();
 ...

et un array du genre
var MonArray = new Array();
 MonArray.push(new maClasse(...));
 MonArray.push(new maClasse(...));
 etc...

et ensuite, je veux remplire ma table avec ces objets. en gros:

function CreerTable() {
  var table = document.CreateElement("table");
  for (i=0; i<MonArray.length; i++) {
    var tr = table.appendChild( document.CreateElement("tr") );
    var td = tr .appendChild( document.CreateElement("td") );
     var a  = td.appendChild( document.CreateElement("a") );
     a.appendChild(document.createTextNode(MonArray[i].getCaption()));
     a.href = "javascript:MonArray[i].function1()"; //comment faire pour que l'objet MonArray[i] soit stocké ici ?
  }
 }

le probleme est de savoir comment, pour chaque ligne, faire que le <a> appele la fonction1() sur l'objet maClasse qui lui est associé ?
vendredi 27 février 2009 à 00:33:08 | Re : stocker objet javascript dans noeud DOM

PetoleTeam

Membre Club
un lien qui est également à lire Langages basés sur les classes et langages basés sur les prototypes
 
sans rentrer dans le détail, cela peut donner en gros un truc comme cela
<html>
<head>
<title>[PetoleTeam]</title>
<script type="text/javascript">
var MonArray =
  [
    {texte:"Ligne1", fct:function(){alert('click sur Ligne1')}},
    {texte:"Ligne2", fct:function(){alert('click sur Ligne2')}}
  ];
//---------------------------------------------
function Add_Event( obj_, event_, func_, mode_){
  if( obj_.addEventListener)
    obj_.addEventListener( event_, func_, mode_? mode_:false);
  else
    obj_.attachEvent( 'on'+event_, func_);
}
//----------------------------
function Create_Table( array_){
  //-- Creation de la table
  var O_Table = document.createElement( 'table');
  //-- Ajout de la table
  document.body.appendChild( O_Table);
  //-- Creation des lignes
  for (var i = 0; i < array_.length; i++) {
    var O_Row = O_Table.insertRow(-1);
    //-- Creation des colonnes
    var O_Cell = O_Row.insertCell( - 1);
    //--Creation du lien
    var O_Lien = document.createElement( 'a');
    //--Creation du texte
    var O_Text = document.createTextNode( MonArray[i].texte)
    //--Ajout du texte
    O_Lien.appendChild( O_Text);
    //--Ajout du lien
    O_Cell.appendChild( O_Lien);
    //--Ajout de l'evenement sur le lien
    Add_Event( O_Lien, 'click' ,MonArray[i].fct);
  }
}
</script>
</head>
<body>
  <a href="Create_Table( MonArray);">Création</a>
</body>
</html>
...
;O)
dimanche 1 mars 2009 à 20:54:45 | Re : stocker objet javascript dans noeud DOM

Kimjoa
concernant l'héritage en javascript  j'ai posté un script pour facilitér la définition de classe ici .

"creer une classe heritee de HTMLTableRowElement" : marche pas sous ie.

pour stoker un objet javascript dans un noeud html , tu doit passer par un eval(), avec une petite particularité, mettre un tableau entre la référence de ton objet. exemple :
<div id='test' monObjet='le.nom.de.ma.reference'></div>
 ou <div  id='test' monObjet='{propJSON:value,prop2:value}'></div>

ce ki donne pour le js
var monObjet=eval('['+document.getElementById('test').getAttribute('monObjet')+']')[0];

voilà normalement ça marche

a++


Cette discussion est classée dans : javascript, table, objet, noeud, stocker

Répondre à ce message

Sujets en rapport avec ce message

javascript et style pour formulaire [ par scguillaume ] comment appliquer un style (CSS) à un objet de formulaire (type liste) sur l'envenement ONCLICK d'un autre objet du formulaire (type radio)?merci puce dans javascript [ par spacecool ] je cherche un moyen d'écrire dans un editeur de texte fait en javascript, des puces et des numérotations. Je possède un code (que j'ai trouvé ici d'ai [javascript] l'objet history [ par cinetryx ] Salut a tous, je cherche un moyen de recuperer les adresses referencer dans l'objet history, je vousdrais donc savoir si c possible et ou sinon est-c Effacer les données dans une table [ par MikeQuebec ] Bonjour,Je travail en ce moment en HTML DB d'Oracle.Je dois faire un script en javascript qui permettrais de vider les données d'une table.Je ne suis Calculs javascript [ par nikeman13 ] Bonjour ! J'aimerais mettre sur mon site un petit système de calculs . Voila ce que je veux faire : Quantité d'objet 1 voulu [____] Quantité d'objet 2 javascript, asp:table et iframe [ par Lyche ] Bonjour à tous.Je suis totalement débutant en ce qui concerne javascript et je me pose une question très bête.Je vous place le contexte. J'ai une page Gérer un agenda en Javascript en récupérant des dates SQL [ par Sp6men000 ] Bonjour,Je suis actuellement en phase de développement d'un site internet. Il utilise une base de donnée SQL qui posséde une table de la forme: table selection dans un tableau [ par saltwater08 ] Bonjour,j'ai une fonction qui sert a changer la couleur du quand on click dessu, et colorie tout les autres avec un autre couleur c un genre de sele Objet TDC activeX , recuperation valuer DATAFLD pour la placer dans une variable JavaScript [ par hambis ] Bonjour a tous Si vous pouvez m aider au problème suivant : J utilise l objet TDC Active X (I.Expl.) pour afficher une liste d articles contenu dans u Récreer un scroll bar avec 3 buttons ( images ) en javascript [ par issam250d ] Bonjour tout le monde, Je ne sais pas est ce que ma requête est dans le bon endroit. J'ai un code pour créer un ascenseur personnalité grâce à des but


Nos sponsors


Sondage...

Comparez les prix


Acer Liquid (noir) (XP.H480Q.013)
Entre 300€ et 346€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

Photo Underwater View of the Ocean With LIght Shining Through the WavePhoto Water in the Beginning of the Grand Canyon
Photo Tropical diver and snorkeler paradise 

Visiter la photothèque

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,250 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)