Les tableaux (balise table)

Version imprimable

:arrow: http://javascript.developpez.com/faq...pt/?page=Table

Comme je n'ai que très peu de commentaires à poster sur cette section, j'ai préféré tout grouper.

1- Comment ajouter une ligne à un tableau ?
http://javascript.developpez.com/faq...ble#AjoutLigne

Citation:

Dans la fonction addRow(), on initialise tout d'abord une variable newRow avec document.getElementById('table').insertRow(-1). La fonction insertRow peut prendre plusieurs paramètre :

Le style "justifié" s'applique mal à ce texte : on des grands espaces entre chaque mot.
Il manque un "s" à "paramètre". Le bout de code contenu dans la phrase n'est pas mis en évidence. Il manque des points à la fin des énumérations.

J'aimerai que l'on insiste sur le fait que innerHTML n'est pas adapté pour insérer des lignes et des cellules dans un tableau et qu'il faut impérativement utiliser les fonctions du DOM. Il faut réserver innerHTML pour insérer du texte non formaté.

Proposition de correction
Citation:
Code:

1 2 3 4 5 6 7 <table id="table"> <tr> <td>Cellule 0</td> <td>Cellule 1</td> </tr> </table> <input type="button" value="Ajouter une ligne" onclick="AddRow()" >
Code:

1 2 3 4 5 6 7 8 9 <script type="text/javascript"> function AddRow(){ var newRow = document.getElementById('table').insertRow(-1); var newCell = newRow.insertCell(0); newCell.innerHTML = '[nouvelle cellule 0]'; newCell = newRow.insertCell(1); newCell.innerHTML = '[nouvelle cellule 1]'; } </script>
Dans la fonction addRow(), on initialise tout d'abord une variable newRow avec document.getElementById('table').insertRow(-1). La fonction insertRow peut prendre plusieurs paramètres :

-1 : La ligne sera ajoutée à la fin du tableau.
0 : La ligne sera ajoutée au début du tableau.
autre valeur numérique : la ligne sera ajoutée à la place correspondant à la valeur numérique. Cette valeur ne doit tout de même pas être supérieure au nombre total de lignes du tableau.

Remarque :
La fonction innerHTML n'est pas adaptée pour insérer des lignes et des cellules dans un tableau, il faut impérativement utiliser les fonctions du DOM. Il faut réserver innerHTML pour insérer du texte non formaté.
Voir Utilisation du DOM.
2- Comment écrire dans une cellule d'un tableau ?
http://javascript.developpez.com/faq...EcrireCelleule
On pourra remarquer une faute de frappe dans le lien : #EcrireCelleule au lieu de #EcrireCellule ;) (le lien est tout de même valide malgré la faute).

3- Comment mettre un scrollbar à gauche sur un tableau ?
http://javascript.developpez.com/faq...ble.scrollLeft
RAS

24/11/2012, 12h23
Auteur

Aucune remarque à formuler ? :aie:
24/11/2012, 16h37
NoSmoking
:salut:

2- Comment écrire dans une cellule d'un tableau ?
Code:

1 2 3 var oTexte = document.createTextNode('Au revoir'); var oCel = document.getElementById('cel'); oCel.replaceChild( oTexte, oCel.firstChild);// attention quand même à la structure du contenu
Il y aurait matière à développez, :mrgreen:, au sujet de l'injection/modification/suppression d'éléments dans les TABLEs.

Utilisations prioritaires des méthodes qui sont faites pour cela insertRow, insertCell, deleteRow, deleteCell et autres, et que dans le cas d'utilisation de la méthode createElement l'élément TR doit être ajouté au TBODY de la table pour être crossBrowser.
24/11/2012, 19h31
Auteur

Citation:

Envoyé par NoSmoking

:salut:
Il y aurait matière à développez, :mrgreen:, au sujet de l'injection/modification/suppression d'éléments dans les TABLEs.

J'ai ce script comme exemple pour l'ajout / suppression de lignes :
http://www.developpez.net/forums/d33...u/#post2057900
Après quelques retouches on peut peut-être l'ajouter dans la question ? Ou alors dans la partie Divers scripts utiles ?
25/11/2012, 09h02
vermine

Trois Q/R me semble mieux. ;)
27/11/2012, 22h13
Auteur

Citation:

Envoyé par vermine

Trois Q/R me semble mieux. ;)

Je vais préparer ça.

Au passage, j'ai celle là

Code:

1
2
3
4
5
// Suppression de toutes les lignes d'une table
var oTable = document.getElementById('id_table');
  while( oTable.rows.length){
    oTable.deleteRow(-1);
}

28/11/2012, 20h01
Auteur
Citation:
Envoyé par NoSmoking

Au passage, j'ai celle là

Code:

1 2 3 4 5 // Suppression de toutes les lignes d'une table var oTable = document.getElementById('id_table'); while( oTable.rows.length){ oTable.deleteRow(-1); }
oui, mais non :aie: Car au final il ne resterait que la balise <table> et un tableau sans au moins une ligne n'est plus un tableau :? Donc je ne suis pas favorable à cette fonction ou alors

Code:

while( oTable.rows.length - 1)
01/12/2012, 18h40
NoSmoking

Citation:

(...)et un tableau sans au moins une ligne n'est plus un tableau(...)

je donnais l'exemple dans un cadre général à savoir comment supprimer une ligne d'un tableau en utilisant la méthode deleteRow( param), qui attend en paramètre un entier désignant le numéro de la ligne, sachant que la première ligne a comme index zéro...etc..
05/12/2012, 20h10
Auteur

Hello,

non je n'ai pas oublié la FAQ, mais beaucoup de fatigue en ce moment. :(
Je vais réfléchir à la façon de présenter ça et je posterai à la suite.

bonjour,

Voici un petit script pour insérer des cellules dans un tableau. Je ferai de même pour l'insertion et la suppression de lignes.

Citation:

Comment insérer des cellules dans un tableau ?
On peut considérer 3 cas de figure :

insérer de cellules "simples" ;
fusion horizontale de cellules ;
fusion verticale de cellules.

Dans ces 3 fonctions, on utilisera des fonctions du DOM, insertRow() et insertCell(). La propriété innerHTML pour insérer ce genre d'éléments est à proscrire.

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
 
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
 
<script type="text/javascript">
<!--
function insererCellules()
{
    var cell, ligne;
    
    // on récupère l'identifiant (id) de la table qui sera modifiée
    var tableau = document.getElementById("idTable");    
    // nombre de lignes actuels dans la table (avant ajout de la ligne)
    var nbLignes = tableau.rows.length;
    
    ligne = tableau.insertRow(-1);              // création d'une ligne pour ajout en fin de table 
                                               // le paramètre est dans ce cas (-1)
    
    // création et insertion des cellules dans la nouvelle ligne créée
    cell = ligne.insertCell(0);                    // création et insertion de la cellule 0
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 0";    // ajout du texte dans la cellule 0
    
    cell = ligne.insertCell(1);                    // création insertion de la cellule 1
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 1";    // ajout du texte dans la cellule 1
    
    cell = ligne.insertCell(2);                    // création insertion de la cellule 2
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 2";    // ajout du texte dans la cellule 2
    
    cell = ligne.insertCell(3);                    // création insertion de la cellule 3
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 3";    // ajout du texte dans la cellule 3
}
 
 
function insererLigne_2CellulesHorizontalesFusionnees()
{
    var cell, ligne;
    
    // on récupère l'identifiant (id) de la table qui sera modifiée
    var tableau = document.getElementById("idTable");
    
    // nombre de lignes actuels dans la table (avant ajout de la ligne)
    var nbLignes = tableau.rows.length;
    
    ligne = tableau.insertRow(-1);              // création d'une ligne pour ajout en fin de table 
                                                // le paramètre est dans ce cas (-1)
                                                
    // création et insertion des cellules dans la nouvelle ligne créée
    cell = ligne.insertCell(0);                    // création et insertion de la cellule 0 dans la colonne 0
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 0";    // ajout du texte dans la cellule 0
    
    
    cell = ligne.insertCell(1);      // création et insertion de la cellule 1
    cell.colSpan = 2;                // colSpan=2 : cette cellule prendra 2 colonnes en largeur
                                     // fusion des colonnes 1 et 2 car la cellule 0 est déjà présente 
                                    // dans la nouvelle ligne
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 1";    // ajout du texte dans la cellule 1
 
    
    cell = ligne.insertCell(2);        // /!\ création et insertion de la cellule 2 dans la colonne 3
                                    // car la cellule d'index 1 fait 2 colonnes de large
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 2";    // ajout du texte dans la cellule 2
}
 
function insererLigne_2CellulesVerticalesFusionnees()
{
    var cell, ligne1, ligne2;
    
    // on récupère l'identifiant (id) de la table qui sera modifiée
    var tableau = document.getElementById("idTable");
    // nombre de lignes actuels dans la table (avant ajout des lignes)
    var nbLignes = tableau.rows.length;
 
    // Pour fusionner 2 cellules verticalement, il faut nécessairement créer 2 lignes
    // Pour fusionner 3 cellules verticalement, il faut créer 3 lignes, etc.
    
    // Dans cet exemple, deux cellules seront fusionnées verticalement
    ligne1 = tableau.insertRow(-1);        // création d'une ligne 1 pour ajout en fin de table 
    ligne2 = tableau.insertRow(-1);        // création d'une ligne 2 pour ajout en fin de table 
    
    // création et insertion des cellules dans ligne1 
    cell = ligne1.insertCell(0);        // création et insertion de la cellule 0 dans la colonne 0
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 0";    // ajout du texte dans la cellule 0
    
    cell = ligne1.insertCell(1);        // création et insertion de la cellule 1 dans la colonne 1
    cell.rowSpan = 2;                    // rowSpan=2 : cette cellule prendra donc 2 lignes en hauteur    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 1";    // ajout du texte dans la cellule 1
    
    
    cell = ligne1.insertCell(2);        // création et insertion de la cellule 2 dans la colonne 2
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 2";
    
    cell = ligne1.insertCell(3);        // création et insertion de la cellule 3 dans la colonne 3
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 3";    
    
 
    // création et insertion des cellules dans ligne2
    cell = ligne2.insertCell(0);        // création et insertion de la cellule 1 dans la colonne 1
    cell.innerHTML = "Ligne " + (nbLignes+1) + " Cellule 0";
        
    cell = ligne2.insertCell(1);        // /!\ création et insertion de la cellule 1 dans la colonne 2
                                        // la colonne 1 est déjà prise par une cellule qui prend 2 ligne
                                        // cette cellule d'index 1 sera donc décalée vers la droite et 
                                        // sera donc dans la colonne d'index 2
    cell.innerHTML = "Ligne " + (nbLignes+1) + " Cellule 2";    
    
    cell = ligne2.insertCell(2);        // /!\ création et insertion de la cellule 2 dans la colonne 3
    cell.innerHTML = "Ligne " + (nbLignes+1) + " Cellule 3";    
    
}
 
//-->
</script> 
 
 
<style type="text/css">
<!--
table{
        border: 2px ridge grey;
}
td{
        border: 2px ridge grey;
        padding: 4px;
}
 
 
-->
</style> 
 
 
</head>
 
<body>
 
<div>
<table id="idTable">
	<tr>
		<td> Ligne 0 Cellule 0
		</td>
		<td> Ligne 0 Cellule 1
		</td>
		<td> Ligne 0 Cellule 2
		</td>
		<td> Ligne 0 Cellule 3
		</td>
	</tr>
</table>
 
<br/>
<input type="button" value="Ajouter une ligne" onclick="insererCellules()" />
<input type="button" value="Ajouter une ligne / 2 cellules horizontales fusionnées" onclick="insererLigne_2CellulesHorizontalesFusionnees()" />
<input type="button" value="Ajouter une ligne / 2 cellules verticales fusionnées" onclick="insererLigne_2CellulesVerticalesFusionnees()" />
</div>
 
 
</body>
</html>

Remarques :
- Dans ces exemples, la propriété innerHTML a été utilisée pour insérer du texte non formaté (sans mise en forme). Pour insérer du texte formaté (en gras, italique, souligné), des éléments de mise en forme du texte (div, p, span, etc.) ou des éléments de formulaires (input, select, etc.), vous devrez impérativement utiliser des fonctions DOM.
- L'insertion d'une table au sein d'une cellule n'est pas conseillée (risques d'erreurs dans le code et résultat visuel médiocre).

Citation:

Comment ajouter une ligne dans une table ?

On utilisera la fonction DOM insertRow(valeur). La propriété innerHTMLpour insérer ce genre d'éléments est à proscrire. On considère 3 cas de figure :

insertion à la fin de la table ;
insertion au début de la table ;
insertion à un index défini.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
<!--
function insererLigne_Fin()
{
    var cell, ligne;
    
    // on récupère l'identifiant (id) de la table qui sera modifiée
    var tableau = document.getElementById("idTable");    
    // nombre de lignes actuels dans la table (avant ajout de la ligne)
    var nbLignes = tableau.rows.length;
    
    ligne = tableau.insertRow(-1);              // création d'une ligne pour ajout en fin de table 
                                               // le paramètre est dans ce cas (-1)
    
    // création et insertion des cellules dans la nouvelle ligne créée
    cell = ligne.insertCell(0);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 0";    
    
    cell = ligne.insertCell(1);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 1";    
    
    cell = ligne.insertCell(2);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 2";    
    
    cell = ligne.insertCell(3);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 3";    
}
 
function insererLigne_Debut()
{
    var cell, ligne;
    
    // on récupère l'identifiant (id) de la table qui sera modifiée
    var tableau = document.getElementById("idTable");    
    // nombre de lignes actuels dans la table (avant ajout de la ligne)
    var nbLignes = tableau.rows.length;
    
    ligne = tableau.insertRow(0);   // création d'une ligne pour ajout au début de la table 
                                    // le paramètre est dans ce cas (0)
    
    // création et insertion des cellules dans la nouvelle ligne créée
    cell = ligne.insertCell(0);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 0";    
    
    cell = ligne.insertCell(1);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 1";    
    
    cell = ligne.insertCell(2);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 2";    
    
    cell = ligne.insertCell(3);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 3";  
}
 
function insererLigne_indexN()
{
    var cell, ligne, n;
    
    // on récupère l'identifiant (id) de la table qui sera modifiée
    var tableau = document.getElementById("idTable");    
    // nombre de lignes actuels dans la table (avant ajout de la ligne)
    var nbLignes = tableau.rows.length;
    
 
    n = prompt("Où voulez-vous insérer une ligne ? \n Entrez une valeur entre 0 et " + (nbLignes-1));
    if (n<0 || n >(nbLignes-1))
    {
        alert(" Erreur");
        return;
    }
    
    ligne = tableau.insertRow(n);   // création d'une ligne à la position n
    
   
    // création et insertion des cellules dans la nouvelle ligne créée
    cell = ligne.insertCell(0);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 0";    
    
    cell = ligne.insertCell(1);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 1";    
    
    cell = ligne.insertCell(2);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 2";    
    
    cell = ligne.insertCell(3);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 3";  
}
 
 
//-->
</script> 
 
 
<style type="text/css">
<!--
table{
        border: 2px ridge grey;
}
td{
        border: 2px ridge grey;
        padding: 4px;
}
 
 
-->
</style> 
 
 
</head>
 
<body>
 
<div>
<table id="idTable">
	<tr>
		<td> Ligne 0 Cellule 0
		</td>
		<td> Ligne 0 Cellule 1
		</td>
		<td> Ligne 0 Cellule 2
		</td>
		<td> Ligne 0 Cellule 3
		</td>
	</tr>
</table>
 
<br/>
<input type="button" value="Ajouter une ligne à la fin" onclick="insererLigne_Fin()" />
<input type="button" value="Ajouter une ligne au début" onclick="insererLigne_Debut()" />
<input type="button" value="Ajouter une ligne à un index défini" onclick="insererLigne_indexN()" />
</div>
 
 
</body>
</html>

[Edit]
correction dans la fonction insererLigne_indexN() : j'ai corrigé le texte de la question et la condition :

Code:

1
2
 
 if (n<0 || n >nbLignes)

Code:

1
2
 
 if (n<0 || n >(nbLignes-1))

[/Edit]

Citation:

Comment supprimer une ligne dans une table ?
On considère 3 cas de figure :

suppression à la fin ;
suppression au début ;
suppression d'une ligne définie par son index dans la table (entre 0 et n-1).

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
<!--
function supprimerLigne_Fin()
{   
    // on récupère l'identifiant (id) de la table qui sera modifiée
    var tableau = document.getElementById("idTable");        
    tableau.deleteRow(-1);         // suppression d'une ligne en fin de table 
                                   // le paramètre est dans ce cas (-1)
                                   
}                                   
 
function supprimerLigne_Debut()
{   
    // on récupère l'identifiant (id) de la table qui sera modifiée
    var tableau = document.getElementById("idTable");    
    
    tableau.deleteRow(0);   // suppression d'une ligne au début de la table 
                            // le paramètre est dans ce cas (0)
}
 
function supprimerLigne_indexN()
{
    var n;
    
    // on récupère l'identifiant (id) de la table qui sera modifiée
    var tableau = document.getElementById("idTable");    
    // nombre de lignes actuels dans la table (avant suppression de la ligne n)
    var nbLignes = tableau.rows.length;
    
    n = prompt("Numéro de la ligne à supprimer ?\nEntrez une valeur entre 0 et " + (nbLignes-1));
    
    if (n < 0 || n > (nbLignes-1))
    {
        alert("Erreur, valeur incorrecte");
        return;
    }
    
    tableau.deleteRow(n);   // suppression d'une ligne à l'index n
 
}
 
 
//-->
</script> 
 
 
<style type="text/css">
<!--
table{
        border: 2px ridge grey;
}
td{
        border: 2px ridge grey;
        padding: 4px;
}
 
 
-->
</style> 
 
 
</head>
 
<body>
 
<div>
<table id="idTable">
	<tr>
		<td> Ligne 0 Cellule 0</td>
		<td> Ligne 0 Cellule 1</td>
		<td> Ligne 0 Cellule 2</td>
		<td> Ligne 0 Cellule 3</td>
	</tr>
	<tr>
		<td> Ligne 1 Cellule 0</td>
		<td> Ligne 1 Cellule 1</td>
		<td> Ligne 1 Cellule 2</td>
		<td> Ligne 1 Cellule 3</td>
	</tr>	
	<tr>
		<td> Ligne 2 Cellule 0</td>
		<td> Ligne 2 Cellule 1</td>
		<td> Ligne 2 Cellule 2</td>
		<td> Ligne 2 Cellule 3</td>
	</tr>	
	<tr>
		<td> Ligne 3 Cellule 0</td>
		<td> Ligne 3 Cellule 1</td>
		<td> Ligne 3 Cellule 2</td>
		<td> Ligne 3 Cellule 3</td>
	</tr>		
	<tr>
		<td> Ligne 4 Cellule 0</td>
		<td> Ligne 4 Cellule 1</td>
		<td> Ligne 4 Cellule 2</td>
		<td> Ligne 4 Cellule 3</td>
	</tr>		
</table>
 
<br/>
<input type="button" value="Supprimer une ligne à la fin" onclick="supprimerLigne_Fin()" />
<input type="button" value="Supprimer une ligne au début" onclick="supprimerLigne_Debut()" />
<input type="button" value="Supprimer une ligne à un index défini" onclick="supprimerLigne_indexN()" />
</div>
 
 
</body>
</html>

remarque 1
Je supprimerais le  qui sont une subsistance du passé dans les balises SCRIPT et STYLE.

remarque 2

Citation:

La propriété innerHTMLpour insérer ce genre d'éléments est à proscrire

L'utilisation de la propriété innerHTML est déconseillé dans ce cas.

remarque 3
Comment supprimer une ligne dans une table ?
dans le code fourni je mettrais le test sur l’existence avant suppression
exemple
Code:

1 2 3 4 5 6 // on récupère l'identifiant (id) de la table qui sera modifiée var tableau = document.getElementById("idTable"); if( tableau.rows.length){ tableau.deleteRow(-1); // suppression d'une ligne en fin de table // le paramètre est dans ce cas (-1) }

13/01/2013, 13h13
Auteur

Citation:

Envoyé par NoSmoking

remarque 1
Je supprimerais le  qui sont une subsistance du passé dans les balises SCRIPT et STYLE.

remarque 2

L'utilisation de la propriété innerHTML est déconseillé dans ce cas.

remarque 3
Comment supprimer une ligne dans une table ?
dans le code fourni je mettrais le test sur l’existence avant suppression

Noté. J'attends d'autres remarques avant de corriger.

Citation:

Comment insérer des cellules dans un tableau ?
On peut considérer 3 cas de figure :

insérer de cellules "simples" ;
fusion horizontale de cellules ;
fusion verticale de cellules.

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title>Insérer des cellules dans un tableau</title>
 
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
 
<script type="text/javascript">
function insererCellules()
{
    var cell, ligne;
 
    // on récupère l'identifiant (id) de la table qui sera modifiée
    var tableau = document.getElementById("idTable");    
    // nombre de lignes actuels dans la table (avant ajout de la ligne)
    var nbLignes = tableau.rows.length;
 
    ligne = tableau.insertRow(-1);              // création d'une ligne pour ajout en fin de table 
                                               // le paramètre est dans ce cas (-1)
 
    // création et insertion des cellules dans la nouvelle ligne créée
    cell = ligne.insertCell(0);                    // création et insertion de la cellule 0
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 0";    // ajout du texte dans la cellule 0
 
    cell = ligne.insertCell(1);                    // création insertion de la cellule 1
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 1";    // ajout du texte dans la cellule 1
 
    cell = ligne.insertCell(2);                    // création insertion de la cellule 2
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 2";    // ajout du texte dans la cellule 2
 
    cell = ligne.insertCell(3);                    // création insertion de la cellule 3
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 3";    // ajout du texte dans la cellule 3
}
 
 
function insererLigne_2CellulesHorizontalesFusionnees()
{
    var cell, ligne;
 
    // on récupère l'identifiant (id) de la table qui sera modifiée
    var tableau = document.getElementById("idTable");
 
    // nombre de lignes actuels dans la table (avant ajout de la ligne)
    var nbLignes = tableau.rows.length;
 
    ligne = tableau.insertRow(-1);              // création d'une ligne pour ajout en fin de table 
                                                // le paramètre est dans ce cas (-1)
 
    // création et insertion des cellules dans la nouvelle ligne créée
    cell = ligne.insertCell(0);                    // création et insertion de la cellule 0 dans la colonne 0
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 0";    // ajout du texte dans la cellule 0
 
 
    cell = ligne.insertCell(1);      // création et insertion de la cellule 1
    cell.colSpan = 2;                // colSpan=2 : cette cellule prendra 2 colonnes en largeur
                                     // fusion des colonnes 1 et 2 car la cellule 0 est déjà présente 
                                    // dans la nouvelle ligne
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 1";    // ajout du texte dans la cellule 1
 
 
    cell = ligne.insertCell(2);        // /!\ création et insertion de la cellule 2 dans la colonne 3
                                    // car la cellule d'index 1 fait 2 colonnes de large
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 2";    // ajout du texte dans la cellule 2
}
 
function insererLigne_2CellulesVerticalesFusionnees()
{
    var cell, ligne1, ligne2;
 
    // on récupère l'identifiant (id) de la table qui sera modifiée
    var tableau = document.getElementById("idTable");
    // nombre de lignes actuels dans la table (avant ajout des lignes)
    var nbLignes = tableau.rows.length;
 
    // Pour fusionner 2 cellules verticalement, il faut nécessairement créer 2 lignes
    // Pour fusionner 3 cellules verticalement, il faut créer 3 lignes, etc.
 
    // Dans cet exemple, deux cellules seront fusionnées verticalement
    ligne1 = tableau.insertRow(-1);        // création d'une ligne 1 pour ajout en fin de table 
    ligne2 = tableau.insertRow(-1);        // création d'une ligne 2 pour ajout en fin de table 
 
    // création et insertion des cellules dans ligne1 
    cell = ligne1.insertCell(0);        // création et insertion de la cellule 0 dans la colonne 0
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 0";    // ajout du texte dans la cellule 0
 
    cell = ligne1.insertCell(1);        // création et insertion de la cellule 1 dans la colonne 1
    cell.rowSpan = 2;                    // rowSpan=2 : cette cellule prendra donc 2 lignes en hauteur    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 1";    // ajout du texte dans la cellule 1
 
 
    cell = ligne1.insertCell(2);        // création et insertion de la cellule 2 dans la colonne 2
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 2";
 
    cell = ligne1.insertCell(3);        // création et insertion de la cellule 3 dans la colonne 3
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 3";    
 
 
    // création et insertion des cellules dans ligne2
    cell = ligne2.insertCell(0);        // création et insertion de la cellule 1 dans la colonne 1
    cell.innerHTML = "Ligne " + (nbLignes+1) + " Cellule 0";
 
    cell = ligne2.insertCell(1);        // /!\ création et insertion de la cellule 1 dans la colonne 2
                                        // la colonne 1 est déjà prise par une cellule qui prend 2 ligne
                                        // cette cellule d'index 1 sera donc décalée vers la droite et 
                                        // sera donc dans la colonne d'index 2
    cell.innerHTML = "Ligne " + (nbLignes+1) + " Cellule 2";    
 
    cell = ligne2.insertCell(2);        // /!\ création et insertion de la cellule 2 dans la colonne 3
    cell.innerHTML = "Ligne " + (nbLignes+1) + " Cellule 3";    
 
}
</script> 
 
 
<style type="text/css">
table{
        border: 2px ridge grey;
}
td{
        border: 2px ridge grey;
        padding: 4px;
}
</style> 
 
 
</head>
 
<body>
 
<div>
<table id="idTable">
	<tr>
		<td> Ligne 0 Cellule 0
		</td>
		<td> Ligne 0 Cellule 1
		</td>
		<td> Ligne 0 Cellule 2
		</td>
		<td> Ligne 0 Cellule 3
		</td>
	</tr>
</table>
 
<br/>
<input type="button" value="Ajouter une ligne" onclick="insererCellules()" />
<input type="button" value="Ajouter une ligne / 2 cellules horizontales fusionnées" onclick="insererLigne_2CellulesHorizontalesFusionnees()" />
<input type="button" value="Ajouter une ligne / 2 cellules verticales fusionnées" onclick="insererLigne_2CellulesVerticalesFusionnees()" />
</div>
 
 
</body>
</html>

Dans ces 3 fonctions, on utilisera des fonctions du DOM, insertRow() et insertCell(). L'utilisation de la propriété innerHTML est déconseillée dans ce cas.

Citation:

Comment ajouter une ligne dans une table ?

On utilisera la fonction DOM insertRow(). L'utilisation de la propriété innerHTML est déconseillée dans ce cas.
On considère 3 cas de figure :

insertion à la fin de la table ;
insertion au début de la table ;
insertion à un index défini.

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title>Ajout d'une ligne dans une table</title>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
function insererLigne_Fin()
{
    var cell, ligne;
 
    // on récupère l'identifiant (id) de la table qui sera modifiée
    var tableau = document.getElementById("idTable");    
    // nombre de lignes actuels dans la table (avant ajout de la ligne)
    var nbLignes = tableau.rows.length;
 
    ligne = tableau.insertRow(-1);              // création d'une ligne pour ajout en fin de table 
                                               // le paramètre est dans ce cas (-1)
 
    // création et insertion des cellules dans la nouvelle ligne créée
    cell = ligne.insertCell(0);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 0";    
 
    cell = ligne.insertCell(1);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 1";    
 
    cell = ligne.insertCell(2);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 2";    
 
    cell = ligne.insertCell(3);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 3";    
}
 
function insererLigne_Debut()
{
    var cell, ligne;
 
    // on récupère l'identifiant (id) de la table qui sera modifiée
    var tableau = document.getElementById("idTable");    
    // nombre de lignes actuels dans la table (avant ajout de la ligne)
    var nbLignes = tableau.rows.length;
 
    ligne = tableau.insertRow(0);   // création d'une ligne pour ajout au début de la table 
                                    // le paramètre est dans ce cas (0)
 
    // création et insertion des cellules dans la nouvelle ligne créée
    cell = ligne.insertCell(0);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 0";    
 
    cell = ligne.insertCell(1);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 1";    
 
    cell = ligne.insertCell(2);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 2";    
 
    cell = ligne.insertCell(3);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 3";  
}
 
function insererLigne_indexN()
{
    var cell, ligne, n;
 
    // on récupère l'identifiant (id) de la table qui sera modifiée
    var tableau = document.getElementById("idTable");    
    // nombre de lignes actuels dans la table (avant ajout de la ligne)
    var nbLignes = tableau.rows.length;
 
 
    n = prompt("Où voulez-vous insérer une ligne ? \n Entrez une valeur entre 0 et " + (nbLignes-1));
    if (n<0 || n >(nbLignes-1))
    {
        alert(" Erreur");
        return;
    }
 
    ligne = tableau.insertRow(n);   // création d'une ligne à la position n
 
 
    // création et insertion des cellules dans la nouvelle ligne créée
    cell = ligne.insertCell(0);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 0";    
 
    cell = ligne.insertCell(1);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 1";    
 
    cell = ligne.insertCell(2);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 2";    
 
    cell = ligne.insertCell(3);                    
    cell.innerHTML = "Ligne " + nbLignes + " Cellule 3";  
}
</script> 
 
 
<style type="text/css">
table{
        border: 2px ridge grey;
}
td{
        border: 2px ridge grey;
        padding: 4px;
}
</style> 
 
 
</head>
 
<body>
 
<div>
<table id="idTable">
	<tr>
		<td> Ligne 0 Cellule 0
		</td>
		<td> Ligne 0 Cellule 1
		</td>
		<td> Ligne 0 Cellule 2
		</td>
		<td> Ligne 0 Cellule 3
		</td>
	</tr>
</table>
 
<br/>
<input type="button" value="Ajouter une ligne à la fin" onclick="insererLigne_Fin()" />
<input type="button" value="Ajouter une ligne au début" onclick="insererLigne_Debut()" />
<input type="button" value="Ajouter une ligne à un index défini" onclick="insererLigne_indexN()" />
</div>
 
 
</body>
</html>

Citation:

Comment supprimer une ligne dans une table ?

On considère 3 cas de figure :

suppression à la fin ;
suppression au début ;
suppression d'une ligne définie par son index dans la table (entre 0 et n-1).

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title>Supprimer une ligne dans une table</title>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
function supprimerLigne_Fin()
{   
    // on récupère l'identifiant (id) de la table qui sera modifiée
    var tableau = document.getElementById("idTable");     
    if (tableau.rows.length)
    {
        tableau.deleteRow(-1);         // suppression d'une ligne en fin de table
                                             // le paramètre est dans ce cas (-1)
    } 
}                                   
 
function supprimerLigne_Debut()
{   
    // on récupère l'identifiant (id) de la table qui sera modifiée
    var tableau = document.getElementById("idTable");    
    if (tableau.rows.length)
    {
        tableau.deleteRow(0);   // suppression d'une ligne au début de la table 
                                        // le paramètre est dans ce cas (0)
    }
}
 
function supprimerLigne_indexN()
{
    var n;
 
    // on récupère l'identifiant (id) de la table qui sera modifiée
    var tableau = document.getElementById("idTable");    
    // nombre de lignes actuels dans la table (avant suppression de la ligne n)
    var nbLignes = tableau.rows.length;
 
    n = prompt("Numéro de la ligne à supprimer ?\nEntrez une valeur entre 0 et " + (nbLignes-1));
 
    if (n < 0 || n > (nbLignes-1))
    {
        alert("Erreur, valeur incorrecte");
        return;
    }
 
    if (tableau.rows.length)
    {    
        tableau.deleteRow(n);   // suppression d'une ligne à l'index n
    }
 
}
</script> 
 
 
<style type="text/css">
table{
        border: 2px ridge grey;
}
td{
        border: 2px ridge grey;
        padding: 4px;
}
</style> 
 
 
</head>
 
<body>
 
<div>
<table id="idTable">
	<tr>
		<td> Ligne 0 Cellule 0</td>
		<td> Ligne 0 Cellule 1</td>
		<td> Ligne 0 Cellule 2</td>
		<td> Ligne 0 Cellule 3</td>
	</tr>
	<tr>
		<td> Ligne 1 Cellule 0</td>
		<td> Ligne 1 Cellule 1</td>
		<td> Ligne 1 Cellule 2</td>
		<td> Ligne 1 Cellule 3</td>
	</tr>	
	<tr>
		<td> Ligne 2 Cellule 0</td>
		<td> Ligne 2 Cellule 1</td>
		<td> Ligne 2 Cellule 2</td>
		<td> Ligne 2 Cellule 3</td>
	</tr>	
	<tr>
		<td> Ligne 3 Cellule 0</td>
		<td> Ligne 3 Cellule 1</td>
		<td> Ligne 3 Cellule 2</td>
		<td> Ligne 3 Cellule 3</td>
	</tr>		
	<tr>
		<td> Ligne 4 Cellule 0</td>
		<td> Ligne 4 Cellule 1</td>
		<td> Ligne 4 Cellule 2</td>
		<td> Ligne 4 Cellule 3</td>
	</tr>		
</table>
 
<br/>
<input type="button" value="Supprimer une ligne à la fin" onclick="supprimerLigne_Fin()" />
<input type="button" value="Supprimer une ligne au début" onclick="supprimerLigne_Debut()" />
<input type="button" value="Supprimer une ligne à un index défini" onclick="supprimerLigne_indexN()" />
</div>
 
 
</body>
</html>

Corrections :
prise en compte des remarques de NoSmoking :
- modification du commentaire sur innerHTML ;
- ajout de la condition if (tableau.rows.length) dans le dernier script ;
- suppression des commentaires HTML dans les code JS et style

:arrow: A relire puis mise à jour dans la FAQ

22/02/2013, 14h10
vermine

:salut:

Voici ce que ça va donner. Je n'ai pas encore mis les fichiers exemples donc c'est normal que les liens plantent. ;)

:fleche: Ajout cellule.
:fleche: Ajout ligne.
:fleche: Suppression ligne.

C'est ok ?

Je publierai les dates et les tables en même temps (ou bien séparément, j'hésite encore).
22/02/2013, 14h21
Auteur

Citation:

Envoyé par vermine

:salut:

Voici ce que ça va donner. Je n'ai pas encore mis les fichiers exemples donc c'est normal que les liens plantent. ;)

:fleche: Ajout cellule.
:fleche: Ajout ligne.
:fleche: Suppression ligne.

C'est ok ?

c'est beau... :oops: et il n'y a rien à ajouter :ccool: Je n'ai pas vu de faute.

Au fait tu te charges de mettre les discussions :resolu: ou c'est moi ? Je penses les taguer Résolu lorsque le tout sera publié.
22/02/2013, 14h41
vermine

A priori je les tague en [Fait] mais on peut changer en [Résolu] si tu préfères. ;)
22/02/2013, 21h39
Auteur

Citation:

Envoyé par vermine

A priori je les tague en [Fait] mais on peut changer en [Résolu] si tu préfères. ;)

Garde les mêmes règles, donc va pour le tag [Fait] ;)
27/02/2013, 13h07
Invité

Bonjour,
Et pardon de participer sans doute par erreur, je préparais un nouvel article sur la modification dynamique d'un tableau dont les valeurs sont dans SQL, en utilisant AJAX.

As-tu traité cet aspect ? Et que vaut'il mieux, que je te donne les éléments et tu les ajouterais a ton sujet si intéressant ? Où considères-tu que le mieux serait de maintenir mon article peut-être en y mettant un lien vers le tien ?

Cela tombe bien, mon "tuteur" (Vermine) participant a ce sujet ;)
va m'aider une fois de plus sur comment faire.

A++
Christele
27/02/2013, 13h27
vermine

Salut Christele,

Ici nous parlons de Q/R pour la FAQ donc tu peux continuer la rédaction de ton article. Vous pouvez même peut-être créer un ensemble un tutoriel complet sur la manipulation des tables. Ce serait le nec plus ultra.

J'en profite pour te demander si tu étais disponible et intéressée par la relecture et la rédaction de Q/R purement AJAX. ;)
27/02/2013, 14h19
Invité

Citation:

Envoyé par vermine

Vous pouvez même peut-être créer un ensemble un tutoriel complet sur la manipulation des tables. Ce serait le nec plus ultra.

Ah, mais l'Ami Auteur tu as fait tout le travail, alors faire juste une connections AJAX/SQL c' est de la broutille par rapport a ton travail.
Cependant il est vrai que cela ferait un article "complet" et, je crois, intéressant ! Qu' en dis-tu :roll:

Citation:

Envoyé par vermine

J'en profite pour te demander si tu étais disponible et intéressée par la relecture et la rédaction de Q/R purement AJAX. ;)

Orthographique non :oops: mais technique, volontiers. Il te suffira de me dire ou quand et comment.

Donc a bientôt des nouvelles.
Christele
27/02/2013, 14h38
vermine

Comme ça et maintenant (on est un peu en retard). :mouarf:

Vois avec Golgotha s'il a déjà avancé là-dessus. ;)
27/02/2013, 16h25
Golgotha

Citation:

Il te suffira de me dire ou quand et comment

heuuuu..... :aie:

:dehors:
27/02/2013, 17h31
Auteur

Citation:

Envoyé par christele_r

Ah, mais l'Ami Auteur tu as fait tout le travail, alors faire juste une connections AJAX/SQL c' est de la broutille par rapport a ton travail.
Cependant il est vrai que cela ferait un article "complet" et, je crois, intéressant ! Qu' en dis-tu :roll:

Si tu le souhaites je peux t'aider pour des requêtes SQL. Par contre AJAX, ce n'est pas un produit ménager ça ? :aie:

Citation:

Envoyé par christele_r

Orthographique non mais technique, volontiers. Il te suffira de me dire ou quand et comment.

Ok, parfait ! Tu peux donc nous aider à corriger la FAQ, je me charge de l'orthographe si tu veux :mrgreen: (plus simple que SQL et Ajax :whistle:)
27/02/2013, 17h59
Golgotha

Citation:

Envoyé par vermine

Comme ça et maintenant (on est un peu en retard). :mouarf:

Vois avec Golgotha s'il a déjà avancé là-dessus. ;)

à part ça :aie: pas de problème pour moi, toute aide est la bienvenue. ;)