Manipulation des Éléments via attribut "name"

[Soundboy39]

Bonjour à tous,

Voilà je souhaite dynamiser l'affichage de groupes d’éléments contenant
chacun des listes de données, en fait il s'agit d'un tableau
et je souhaite que les colonnes s'affiche ou pas si l'on clique sur leurs entêtes...

Je comptais utiliser "document.getElementById" pour manipuler l'affichage
mais le souci c'est que pour une histoire de formulaire et de PHP tous les ID sont identiques,
seul les noms sont différents...

Alors j'ai déjà tenté "document.getElementName" et "document.getElementsByName",
mais ça ne marche pas et en plus d’après ce que j'ai pu lire c'est plus ou moins
déprécié et plus ou moins compatible vis à vis des navigateurs...

donc qui pourrait me donner la méthode à employer dans ce cas ??

mErci d'avance pour vos réponses ET BONNEs fêtes !!

MICKAEL

[Watilin]

Envoyé par Soundboy39

...
mais le souci c'est que pour une histoire de formulaire et de PHP tous les ID sont identiques
...

Les id n'ont de rôle à jouer que côté client. Ton serveur ne devrait pas rencontrer de problèmes pour en générer plusieurs identiques. De plus, avoir plusieurs id identiques sur la même page est une erreur !

Quoiqu'il en soit, si tu veux récupérer tes éléments via leur attribut name, c'est bien la méthode document.getElementsByName qu'il te faut utiliser. Ce qui te pose problème je pense, c'est qu'elle renvoie une collection d'éléments et non pas un élément seul. Il faut itérer sur cette collection avec une boucle for comme ceci :

Code JS :

1
2
3
4
5
var elems = document.getElementsByName('nom_d_element');
for (var i = 0, l = elems.length; i < l; i++) {
   var $e = elems[i];
   faireQuelqueChoseAvec($e);
}

Bon courage

[Soundboy39]

Merci pour la réponse Watilin mais je bloque encore un peu.

C'est OK pour récupérer l’élément mais après comment je fais pour le manipuler ? Si par exemple je veux lui faire un .innerHTML pour ajouter du texte ??

Exemple avec ce code :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
<p onclick="salut()">Clique Ici pour dire bonjour</p>
 
  <p name="bonjour"></p>
 
<script type="text/javascript">
 
function salut() {
  var elems = document.getElementsByName('bonjour');
  for (var i = 0, l = elems.length; i < l; i++) {
     var $e = elems[i];
     faireQuelqueChoseAvec($e);;
  }
 
}
 
</script>

J'aimerai par exemple ajouter "salut à toi" dans la paragraphe ayant l'attribut "name" égal à "bonjour".

[hariman]

Code :

$e.innerHTML = "salut à toi";

[Bovino]

mais le souci c'est que pour une histoire de formulaire et de PHP tous les ID sont identiques,
seul les noms sont différents...

Si tu arrives à créer des noms différents, comment se fait-il que tu n'y arrive pas pour les id ?

Sinon

J'aimerai par exemple ajouter "salut à toi" dans la paragraphe ayant l'attribut "name" égal à "bonjour".

Ben tu récupères quoi d'après toi avec

Code :

document.getElementsByName('bonjour');

???

[Watilin]

Envoyé par Soundboy39

J'aimerai par exemple ajouter "salut à toi" dans la paragraphe ayant l'attribut "name" égal à "bonjour".

Dans ce cas il suffit d'utiliser le premier élément (numéro 0) de la collection :

Code JS :

document.getElementsByName('bonjour')[0].innerHTML = 'Salut à toi !';

Et sinon, quand je dis faireQuelqueChoseAvec($e), ce n'est pas à prendre au pied de la lettre C'est là que tu dois mettre ton propre code.

[Soundboy39]

Merci à toi Watilin, ça marche,
je remet mon code en entier :

Code :

1
2
3
4
5
6
7
8
9
10
<script>
function salut() {
  var elems = document.getElementsByName('bonjour');
  for (var i = 0, l = elems.length; i < l; i++) {
     var $e = elems[i];
     document.getElementsByName('bonjour')[0].innerHTML = 'Salut à toi !';
  }
 
}
</script>

[Bovino]

A quoi ça te sert de faire une boucle si tu ne modifies le contenu que du premier élément ?