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