Ajout de ligne dans un tableau ajoute un espace vide

**le_chomeur** · 03/01/2008, 14h55

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 :

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

**Auteur** · 04/01/2008, 13h17

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 javascript :

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

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

J'ai cru à du PHP en lisant le code

**le_chomeur** · 04/01/2008, 14h00

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

**Auteur** · 04/01/2008, 15h18

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 javascript :

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

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

Ajout de ligne dans un tableau ajoute un espace vide

JavaScript

Discussions similaires

Partager

Partager