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.
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).
Les tableaux (balise table)
http://javascript.developpez.com/faq...pt/?page=Table
(le lien est tout de même valide malgré la faute).
Répondre avec citation
, au sujet de l'injection/modification/suppression d'éléments dans les TABLEs.
Envoyé par NoSmoking
Donc je ne suis pas favorable à cette fonction ou alors 
et il n'y a rien à ajouter 
Je n'ai pas vu de faute.
ou c'est moi ? Je penses les taguer Résolu lorsque le tout sera publié.
Partager