Stocker objet javascript dans noeud DOM

Signaler
Messages postés
991
Date d'inscription
samedi 25 octobre 2003
Statut
Membre
Dernière intervention
29 août 2013
-
Messages postés
262
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014
-
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

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
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)
Messages postés
991
Date d'inscription
samedi 25 octobre 2003
Statut
Membre
Dernière intervention
29 août 2013
6
"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é ?
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
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)
Messages postés
262
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014

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++