Récuperer l'id du dernier élément crée dynamiquement

el_bacha · 26/07/2011, 21h59

Bonjour à tous,

j'essaye de récupérer l'id d'un tableau créé dynamiquement et voici ce que j'ai pensé faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
 
<body>
<script type="text/javascript">
var i = 0;
function inie()
{
function addTbl()
	{
	var myTable = document.createElement('table');
	myTable.setAttribute('border','1');
	myTable.setAttribute('id','table_'+i);	
	var myTbody = document.createElement('tbody');
	myTable.appendChild(myTbody);
	document.getElementById('divo').appendChild(myTable);
	}
	addTbl();
var nbTables = document.getElementById('divo').getElementsByTagName('table');
//var lastTable = nbTables[length];
var allTables = document.getElementById('divo').getElementsByTagName('table');
alert (allTables[length].id);
alert (allTables.length);
}
</script>
</head>
<body>
<div id="divo">
<form id="formq" name="formq" method="post" action="">
<input type="submit" name="sub" value="do it "/>
</form>
</div>
<div id="divoo">
</div>
<div id="qcm_config">
<table border="1">
<tr>
<td>
<input type="button" value="add" onclick="inie()" />
</td>
<td width="120px" style="">
<div id="nbch" align="center">nombre de choix: 
</div></td>
<td width="100px">
<select id="nb_alt" name="nb_alt" style="width:100px">
<option id="def" value="0" selected="selected"></option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
<td width="120px" style="">
<div id="nbch" align="center">nombre de blancs 
</div></td>
<td width="100px">
<select id="nb_blc" name="nb_blc" style="width:100px">
<option id="def" value="0" selected="selected"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
</table>
 
</div>
<p id="hoho">
  <q>Can you copy <em>everything</em> I say?</q>
</p>
<script type="text/javascript">
var f = document.getElementById('hoho');
var cl = f.cloneNode(true);
document.getElementById('hoho').appendChild(cl);
</script>
<br />
<div id="foo">
 
</div>
<?php
if (isset($_POST['sub']))
{
echo "<pre>";
print_r ($_POST);
echo "<pre>";
}
?>
 
 
</body>
</html>

ce que je veux faire ici est de récupérer l'id du dernier tableau inséré sur la page (de div ayant l'id "divo"). mais à chaque fois comme vous allez le constater ça me donne l'id du premier tableau .
j'ai trop gratté la tête !

qu'es ce qui ne va pas là !!

merci d'avance

mekal · 26/07/2011, 22h15

sur cette ligne tu donne l'id

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

myTable.setAttribute('id','table_'+i);

il te suffit de recupere l'id a ce meme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
myTable.setAttribute('id','table_'+i);
var mon_id='table_'+i

NoSmoking · 26/07/2011, 22h35

Bonsoir,
plusieurs remarques

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

myTable.setAttribute('id','table_'+i);

tu ne fais pas évoluer la valeur de i, donc il vaudra toujours 0.
il te faut faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

myTable.setAttribute('id','table_'+(i++));

un peu plus loin tu écris

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var allTables = document.getElementById('divo').getElementsByTagName('table');
alert (allTables[length].id);

que vaut length ???
je penses que tu veux lire le dernier indice du tableau alors il te faut faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert (allTables[allTables.length -1].id);

dernier point une bonne indentation du code aide à la lisibilité donc à la maintenance.

el_bacha · 26/07/2011, 23h54

bonsoir à tous

oups j'ai oublié de mettre i++ après la ligne 13 donc le code deviens comme suit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
 
<body>
<script type="text/javascript">
var i = 0;
function inie()
{
i++;
function addTbl()
	{
	var myTable = document.createElement('table');
	myTable.setAttribute('border','1');
	myTable.setAttribute('id','table_'+i);	
	var myTbody = document.createElement('tbody');
	myTable.appendChild(myTbody);
	document.getElementById('divo').appendChild(myTable);
	}
	addTbl();
var nbTables = document.getElementById('divo').getElementsByTagName('table');
//var lastTable = nbTables[length];
var allTables = document.getElementById('divo').getElementsByTagName('table');
alert (allTables[length].id);
alert (allTables.length);
}
</script>
</head>
<body>
<div id="divo">
<form id="formq" name="formq" method="post" action="">
<input type="submit" name="sub" value="do it "/>
</form>
</div>
<div id="divoo">
</div>
<div id="qcm_config">
<table border="1">
<tr>
<td>
<input type="button" value="add" onclick="inie()" />
</td>
<td width="120px" style="">
<div id="nbch" align="center">nombre de choix: 
</div></td>
<td width="100px">
<select id="nb_alt" name="nb_alt" style="width:100px">
<option id="def" value="0" selected="selected"></option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
<td width="120px" style="">
<div id="nbch" align="center">nombre de blancs 
</div></td>
<td width="100px">
<select id="nb_blc" name="nb_blc" style="width:100px">
<option id="def" value="0" selected="selected"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
</table>
 
</div>
<p id="hoho">
  <q>Can you copy <em>everything</em> I say?</q>
</p>
<script type="text/javascript">
var f = document.getElementById('hoho');
var cl = f.cloneNode(true);
document.getElementById('hoho').appendChild(cl);
</script>
<br />
<div id="foo">
 
</div>
<?php
if (isset($_POST['sub']))
{
echo "<pre>";
print_r ($_POST);
echo "<pre>";
}
?>
 
 
</body>
</html>

je veux vous dire aussi que firebug 1.7.3 me montre que chaque tableau créé a un id propre a lui qui incrémente de 1 à chaque fois

voila donc je veux juste récupérer l'id du dernier tableau créé .

merci mekal j'ai pensé à ton idée mais je préfère cette méthode pour le moment et si je ne trouve pas de solution je l'utiliserai.

NoSmoking : je t assure que chaque tableau a un id propre a lui sans et que

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert (allTables.length);

me donne le dernier "i" incrémenté aussi et le numéro du dernier élément tableau dans le div "divo" sans problèmes mais ce que je ne comprends pas est que

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert (allTables[length].id);

ne me donne que l'id du premier tableau.

merci pour tout

el_bacha · 27/07/2011, 00h02

euuuhh !!

ca marche mais je ne comprends pas pourquoi et comment !!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
 
<body>
<script type="text/javascript">
var i = 0;
function inie()
{
i++;
function addTbl()
	{
	var myTable = document.createElement('table');
	myTable.setAttribute('border','1');
	myTable.setAttribute('id','table_'+i);	
	var myTbody = document.createElement('tbody');
	myTable.appendChild(myTbody);
	document.getElementById('divo').appendChild(myTable);
	}
	addTbl();
var nbTables = document.getElementById('divo').getElementsByTagName('table');
//var lastTable = nbTables[length];
var allTables = document.getElementById('divo').getElementsByTagName('table');
alert (allTables[allTables.length -1].id);
alert (allTables.length);
}
</script>
</head>
<body>
<div id="divo">
<form id="formq" name="formq" method="post" action="">
<input type="submit" name="sub" value="do it "/>
</form>
</div>
<div id="divoo">
</div>
<div id="qcm_config">
<table border="1">
<tr>
<td>
<input type="button" value="add" onclick="inie()" />
</td>
<td width="120px" style="">
<div id="nbch" align="center">nombre de choix: 
</div></td>
<td width="100px">
<select id="nb_alt" name="nb_alt" style="width:100px">
<option id="def" value="0" selected="selected"></option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
<td width="120px" style="">
<div id="nbch" align="center">nombre de blancs 
</div></td>
<td width="100px">
<select id="nb_blc" name="nb_blc" style="width:100px">
<option id="def" value="0" selected="selected"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
</table>
 
</div>
<p id="hoho">
  <q>Can you copy <em>everything</em> I say?</q>
</p>
<script type="text/javascript">
var f = document.getElementById('hoho');
var cl = f.cloneNode(true);
document.getElementById('hoho').appendChild(cl);
</script>
<br />
<div id="foo">
 
</div>
<?php
if (isset($_POST['sub']))
{
echo "<pre>";
print_r ($_POST);
echo "<pre>";
}
?>
 
 
</body>
</html>

pouquoi ce -1 dans

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert (allTables[allTables.length -1].id);

éclairez ma lanterne !!
merci NoSmoking

andry.aime · 27/07/2011, 07h20

Bonjour,

Parce que l'indice d'un tableau commence par 0 ainsi les indices sont de 0 à length-1.

A+.

27/07/2011, 07h20	#6
andry.aime Rédacteur/Modérateur Andry Aimé Inscription : septembre 2007 Messages : 5 128 Détails du profil Informations personnelles : Nom : Andry Aimé Localisation : Ile Maurice Informations forums : Inscription : septembre 2007 Messages : 5 128 Points : 7 269 Points : 7 269	Bonjour, Parce que l'indice d'un tableau commence par 0 ainsi les indices sont de 0 à length-1. A+.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email