tableau retourné par getElementsByName

Version imprimable

21/07/2009, 14h23
Anduriel

tableau retourné par getElementsByName
Bonjour,

Dans la partie <head> j'ai mis simplement:
Code:

1 2 3 4 function aff_tab(tab) { rows = document.getElementsByName("tr_tab" + tab).length; alert(rows); }
et dans <body>:

Code:

<input title="Afficher" type="button" name="aff_tab1" OnClick="aff_tab(1);" value="+" />

où juste après se trouvent plusieurs:

Code:

<tr style="display:none" name="tr_tab1">

Pourquoi me renvoit-on toujours 0?
Merci
21/07/2009, 14h39
E.Bzz

Bonjour,

Citation:

Envoyé par Anduriel

Pourquoi me renvoit-on toujours 0?

parce que tout ceci n'est pas dans un formulaire ? :?

A+
21/07/2009, 15h18
Anduriel

Mmm j'ai oublié les bases du javascript.

Donc je suis obligé de mettre ces balises form? Vu que je n'ai pas de formulaire, je trouve ça un peu superflu... il n'y a pas d'autres moyens?

Merci
21/07/2009, 15h20
E.Bzz

Un form juste pour ça serait effectivement dommage ...

Mais il y a (presque) toujours un autre moyen ;)

A+
21/07/2009, 15h26
Anduriel

Merci, je vais regarder.

Quand même, simple question: pourquoi après avoir mis <form> et </form> ça ne fonctionne toujours pas?
Le <button> doit il être après les <tr> concernés?

Tu n'as pas besoin de mettre en place un formulaire. L'attribut name n'existe pas pour les éléments tr. Ceci retourne 1 pour FF, opera et Safari, mais pas IE pour le tr :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>getElementsByName sans formulaire</title>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <style type="text/css">
  /* code css */
  </style>
</head>
<body>
  <div>
    <table>
      <tr name="t1">
        <td>blah</td>
      </tr>
    </table>
    <input id="i" name="i1" type="text" />
    <button id="b" name="b1" type="button" value="b" onclick="fn(1);">b</button>
  </div>
  <script type="text/javascript">
  <!--
  var fn = function(i) {
    alert("tr : "+ document.getElementsByName("t"+ i).length +
      "\ninput : "+ document.getElementsByName("i"+ i).length);
  }
  //-->
  </script>
</body>
</html>

Testes-tu sur IE?

21/07/2009, 16h03
SpaceFrog

un tr n'a pas d'attribut name ...
passe par les id
21/07/2009, 19h06
Anduriel

Oui je suis sur IE.

Merci, je vais voir ce que je peux faire avec tout ça :)

Bon, ça bug, même avec id.

Code:

1
2
3
4
5
6
7
8
9
10
<script language="javascript">
 
 function aff_tab(tab, dim) {
  for (i=0; i<=dim; i++) {
   nb = tab + "" + i; // pour afficher 11 et non pas 1+1=2
   document.getElementById("tr_tab" + nb).style.display = "block";
  }
 }
 
</script>

Code:

1
2
3
<tr style="display:none" id="tr_tab10">
<tr style="display:none" id="tr_tab11">
<tr style="display:none" id="tr_tab12">

Ca fonctionne pour le 10, mais pas pour le 11.
Si je mets dans le code javascript directement tr_tab11, ça ne fonctionne pas :?

21/07/2009, 20h15
Auteur

Pour infos :
cf. http://www.developpez.net/forums/d28...f/#post1777534 (bon je l'ai vu un peu tard la discussion date un peu :aie:)

Citation:

getElementsByName n'est utilisable que sur les composants du formulaire : form, input (text, radio, checkbox, file, button, password), select, option etc. Les autres balises (span, div, p) n'ont plus l'attribut name (en tout cas pour ces balises il n'existe plus sous FF3).
21/07/2009, 20h24
SpaceFrog

un alert de nb donne quoi ?

Bonsoir.

Je ne vois aucun problème, évidemment il faut remplir les <td> avec quelque chose à afficher :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<script type="text/javascript">
		function aff_tab(tab, dim) {
			for (var i = 0; i < dim; i++) {
				document.getElementById("tr_tab" + tab + "" + i).style.display = "block";
			}
		}
	</script>
</head>
<body onload="aff_tab(2, 3);">
	<table>
		<tr style="display:none" id="tr_tab10"><td>Ligne 1 ; tab10</td></tr>
		<tr style="display:none" id="tr_tab11"><td>Ligne 2 ; tab11</td></tr>
		<tr style="display:none" id="tr_tab12"><td>Ligne 3 ; tab12</td></tr>
		<tr style="display:none" id="tr_tab20"><td>Ligne 4 ; tab20</td></tr>
		<tr style="display:none" id="tr_tab21"><td>Ligne 5 ; tab21</td></tr>
		<tr style="display:none" id="tr_tab22"><td>Ligne 6 ; tab22</td></tr>
		<tr style="display:none" id="tr_tab30"><td>Ligne 7 ; tab30</td></tr>
		<tr style="display:none" id="tr_tab31"><td>Ligne 8 ; tab31</td></tr>
		<tr style="display:none" id="tr_tab32"><td>Ligne 9 ; tab32</td></tr>
	</table>
</body>
</html>

Ah !!

J'avais pas les yeux ouverts en fait, j'ai oublié des guillemets, forcément...
Tout fonctionne maintenant!

J'ai quand meme une question, pas grand chose à voir avec javascript mais avec votre code: j'ai rajouté sur ma page
Code:

1 2 3 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
et à partir de là mes é et è sont remplacés par des carrés... Une explication?

22/07/2009, 12h35
franculo_caoulene

Code:

charset=utf-8

Il faut que ton document soit bel et bien sauvegardé en UTF-8. La façon de faire dépend de ton éditeur de texte ou ton IDE.
22/07/2009, 12h53
SpaceFrog

au pire convertis le fichier avec le bloc note de windows ...
enregristrer sous utf-8
22/07/2009, 18h19
Anduriel

Merci :)