[FAQ] Les tableaux (balise table) [Fait]

Auteur · 18/11/2012, 15h25

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

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

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

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

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

Auteur · 24/11/2012, 12h23

Aucune remarque à formuler ?

NoSmoking · 24/11/2012, 16h37

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

Code :

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

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,

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

Auteur · 24/11/2012, 19h31

Citation:

Envoyé par NoSmoking

Il y aurait matière à développez,

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

vermine · 25/11/2012, 09h02

Trois Q/R me semble mieux.

Auteur · 27/11/2012, 22h13

Citation:

Envoyé par vermine

Trois Q/R me semble mieux.

Je vais préparer ça.

NoSmoking · 28/11/2012, 19h24

Au passage, j'ai celle là

Code :

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

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);
}

Auteur · 28/11/2012, 20h01

Citation:

Envoyé par NoSmoking

Au passage, j'ai celle là

Code :

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

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

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 :

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

while( oTable.rows.length - 1)

NoSmoking · 01/12/2012, 18h40

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

Auteur · 05/12/2012, 20h10

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.

Auteur · 31/12/2012, 15h39

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

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
 
<!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).

Auteur · 31/12/2012, 15h54

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

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

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

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

en

Code javascript :

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

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

[/Edit]

Auteur · 01/01/2013, 17h19

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

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

NoSmoking · 02/01/2013, 15h31

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 :

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

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

Auteur · 13/01/2013, 13h13

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.

Auteur · 19/01/2013, 18h21

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

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
 
<!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 html :

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
 
<!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 html :

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

A relire puis mise à jour dans la FAQ

vermine · 22/02/2013, 14h10

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

Ajout cellule.

Ajout ligne.

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

Auteur · 22/02/2013, 14h21

Citation:

Envoyé par vermine

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

Ajout cellule.

Ajout ligne.

Suppression ligne.

C'est ok ?

c'est beau...

et il n'y a rien à ajouter

Je n'ai pas vu de faute.

Au fait tu te charges de mettre les discussions

ou c'est moi ? Je penses les taguer Résolu lorsque le tout sera publié.

vermine · 22/02/2013, 14h41

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

Auteur · 22/02/2013, 21h39

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]

25/11/2012, 09h02	#5
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 4 065 Détails du profil Informations personnelles : Âge : 28 Informations forums : Inscription : mars 2008 Messages : 4 065 Points : 29 172 Points : 29 172	Trois Q/R me semble mieux. __________________ Médias : influence, pouvoir et fiabilité - Découvrez MooTools - Le mathématicien et ses esclaves Elen Poukram - Isegoria - Sandawe
	00

22/02/2013, 14h10	#17
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 4 065 Détails du profil Informations personnelles : Âge : 28 Informations forums : Inscription : mars 2008 Messages : 4 065 Points : 29 172 Points : 29 172	Voici ce que ça va donner. Je n'ai pas encore mis les fichiers exemples donc c'est normal que les liens plantent. Ajout cellule. Ajout ligne. 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). __________________ Médias : influence, pouvoir et fiabilité - Découvrez MooTools - Le mathématicien et ses esclaves Elen Poukram - Isegoria - Sandawe
	10

22/02/2013, 14h41	#19
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 4 065 Détails du profil Informations personnelles : Âge : 28 Informations forums : Inscription : mars 2008 Messages : 4 065 Points : 29 172 Points : 29 172	A priori je les tague en [Fait] mais on peut changer en [Résolu] si tu préfères. __________________ Médias : influence, pouvoir et fiabilité - Découvrez MooTools - Le mathématicien et ses esclaves Elen Poukram - Isegoria - Sandawe
	00

24/11/2012, 12h23	#2
Auteur Expert Confirmé Sénior Inscription : avril 2004 Messages : 5 177 Détails du profil Informations personnelles : Localisation : France Informations forums : Inscription : avril 2004 Messages : 5 177 Points : 5 680 Points : 5 680	Aucune remarque à formuler ?
	00

05/12/2012, 20h10	#10
Auteur Expert Confirmé Sénior Inscription : avril 2004 Messages : 5 177 Détails du profil Informations personnelles : Localisation : France Informations forums : Inscription : avril 2004 Messages : 5 177 Points : 5 680 Points : 5 680	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.
	00

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