Ajout de ligne dans un tableau ajoute un espace vide

Salut a tous , j'ai un petit souçis, j'essaye d'ajouter une méthode de tri sur un tableau html , pour cela je passe par un tri a bulle de la colonne sélectionné , puis j'ajoute une nouvelle ligne a mon tableau mais la ...
il me remplace toute les ligne de mon tableau et ajoute un espace vide :s

le code :

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
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
 
<!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=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript">
function trier(MyTable){
var Tableau = new Array();
	var tempo = new Array();
	//récupération des cellules de la colonne sélectionné
	var listeLignes = new Array();
	listeLignes = MyTable.getElementsByTagName('tr');
	var nbLignes = listeLignes.length ;
	//On récupère les valeurs de chaque célulle
	for(var i = 1; i < nbLignes ; i++){
		Tableau.push(listeLignes[i].getElementsByTagName('td')[0].innerHTML);
		tempo.push(listeLignes[i]);
	}
 
	for (var ind01 = Tableau.length-1; ind01 >= 0;ind01--)
	{
 
		var temp = null;
		var temp2 = null;
		for (var ind02 = Tableau.length-1; ind02 >= 0;ind02--)
		{
			if (Tableau[ind02] > Tableau[ind01])
			{
				temp2 = Tableau[ind01];
				Tableau[ind01] = Tableau[ind02];
				Tableau[ind02] = temp2;
 
				temp = tempo[ind01];
				tempo[ind01] = tempo[ind02];
				tempo[ind02] = temp;
			}
	   }
	}
	for (var i = 0; i < tempo.length;i++)
	{
		var newLigne = document.createElement('tr');
		newLigne = tempo[i];
		MyTable.appendChild(newLigne);
	}
}
 
function trierBas(MyTable){
	var Tableau = new Array();
	var tempo = new Array();
	//récupération des cellules de la colonne sélectionné
	var listeLignes = new Array();
	listeLignes = MyTable.getElementsByTagName('tr');
	var nbLignes = listeLignes.length ;
	//On récupère les valeurs de chaque célulle
	for(var i = 1; i < nbLignes ; i++){
		Tableau.push(listeLignes[i].getElementsByTagName('td')[0].innerHTML);
		tempo.push(listeLignes[i]);
	}
 
	for (var ind01 = Tableau.length-1; ind01 >= 0;ind01--)
	{
 
		var temp = null;
		var temp2 = null;
		for (var ind02 = Tableau.length-1; ind02 >= 0;ind02--)
		{
			if (Tableau[ind02] < Tableau[ind01])
			{
				temp2 = Tableau[ind02];
				Tableau[ind02] = Tableau[ind01];
				Tableau[ind01] = temp2;
 
				temp = tempo[ind02];
				tempo[ind02] = tempo[ind01];
				tempo[ind01] = temp;
			}
	   }
	}
	for (var i = 0; i < tempo.length;i++)
	{
		var newLigne = document.createElement('tr');
		newLigne = tempo[i];
		MyTable.appendChild(newLigne);
	}
	$("debug").value = "";
	$("debug").value = MyTable.innerHTML;
 
}
 
function $(Element){
	return document.getElementById(Element);
}
</script>
</head>
 
<body>
<table width="100%" border="1" height="108px" id="toto">
<tbody>
  <tr>
    <td><a href="javascript:trier($('toto'));">trier &lt;</a></td>
    <td><a href="javascript:trierBas($('toto'));">trier &gt;</a></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>12</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>5</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>98</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>1</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>25</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>4</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>7</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>2</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>45</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</tbody>     
</table>
<textarea id="debug" rows="20" cols="20" style="width:400px;"></textarea>
</body>
</html>

J'ai essayé avec et sans le tbody , et le code ne marche pas bien sous ie et la je bloque un peu

bonjour,

utilise plutôt insertRow() pour ajouter une ligne à ta table HTML.
Ici un exemple complet pour ajouter/supprimer des cellules d'un tableau :
http://www.developpez.net/forums/sho...d.php?t=334611

Petite remarque : je pense que tu ne devrais pas appeler une fonction javascript "$()" :
Code:

1 2 3 4 function $(Element){ return document.getElementById(Element); }
J'ai cru à du PHP en lisant le code ;)

Yop :)
effectivement , je suis passé par une méthode insertRow() puis insertCell() :)
pour le $() , je l'ai vu sur bc de librairie et il est vrai que c'est plus agréable d'écrire $('monelement') qu'un getElementById a chaque fois ;)

Résolut ^^

Citation:

Envoyé par le_chomeur

Yop :)
pour le $() , je l'ai vu sur bc de librairie et il est vrai que c'est plus agréable d'écrire $('monelement') qu'un getElementById a chaque fois ;)

En fait c'est plus le nom de la fonction $() qui me gêne que son code... J'aurais écris :
Code:

1 2 3 4 5 function chercheElement(Element) { return document.getElementById(Element); }
;)