Sujet Précédent Sujet Suivant

Stocker objet javascript dans noeud DOM

Guillemouze Messages postés 991 Date d'inscription samedi 25 octobre 2003 Statut Membre Dernière intervention 29 août 2013 - 25 févr. 2009 à 20:48
cs_Kimjoa Messages postés 262 Date d'inscription vendredi 6 mai 2005 Statut Membre Dernière intervention 19 septembre 2014 - 1 mars 2009 à 20:54
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.

4 réponses

Réponse 1 / 4
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
26 févr. 2009 à 19:44
Bonjour,
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, ...mais je ne sais pas si elles sont faisables
en javascript</td>
</td></tr></tbody></table>la
meilleur façon de savoir c'est d'essayer, on apprend énormement comme cela...

<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, ...un array qui contient plusieurs
objets</td>
</td></tr></tbody></table>c'est assez
vague...
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, stocker directement l'objet dans le noeud
----
. Est-ce possible ? je ne crois pas qu'il soit possible d'integrer une
variable complexe
(classe).</td>
</td></tr></tbody></table>tu n'as
de variable complexe dans les balises <TD> contenues entre les balises
<TR>, c'est du HTML avec toutes ses possibilités
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, mais je ne crois pas qu'il soit possible de
faire de l'heritage en
javascript</td>
</td></tr></tbody></table>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)
0
Réponse 2 / 4
Guillemouze Messages postés 991 Date d'inscription samedi 25 octobre 2003 Statut Membre Dernière intervention 29 août 2013 6
26 févr. 2009 à 22:36
"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 appele la fonction1() sur l'objet maClasse qui lui est associé ?
0
Réponse 3 / 4
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
27 févr. 2009 à 00:33
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>

  [javascript:Create_Table( MonArray); Création]


</html>
...
;O)
0
Réponse 4 / 4
cs_Kimjoa Messages postés 262 Date d'inscription vendredi 6 mai 2005 Statut Membre Dernière intervention 19 septembre 2014
1 mars 2009 à 20:54
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 :

 ou

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

voilà normalement ça marche

a++
0

Discussions similaires

la référence d'objet n'est pas définie à une instance d'un objet
haddreezy -
haddreezy -

6 réponses
la reference d'objet n'est pas définie a une instance d'un objet
thmatew -
krimog -

5 réponses
Erreur "La référence d'objet n'est pas définie à une instance d'un objet."
bikini42 -
bikini42 -

10 réponses
La référence d'objet n'est pas définie à une instance d'un objet.
cs_SEB73460 -
NHenry -

5 réponses
[erreur] La référence d'objet n'est pas définie à une instance d'un objet.
kilaor -
Whismeril -

10 réponses
Rejoignez-nous