FAQ JavaScriptConsultez toutes les FAQ
Nombre d'auteurs : 43, nombre de questions : 176, dernière mise à jour : 19 décembre 2013
Sommaire→Les tableaux (balise table)
Pour insérer une cellule dans un tableau (ou table), on peut considérer trois cas de figure :
- insertion de cellules "simples" ;
- fusion horizontale de cellules ;
- fusion verticale de cellules.
Dans ces trois cas, on utilise des fonctions du DOM : insertRow() et insertCell(). L'utilisation de la propriété innerHTML est déconseillée dans ce cas.
Imaginons cette table :
<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>
Insertion de cellules "simples"
Nous allons expliquer cette insertion de cellules en construisant une nouvelle ligne pas à pas.
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 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
}
Fusion horizontale de cellules
Cette fusion permet d'obtenir une cellule plus large que les autres.
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 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
}
Nous ne créons effectivement que trois cellules au lieu de quatre car une des cellules a la largeur de deux cellules.
Fusion verticale de cellules
Cette fusion permet d'obtenir une cellule plus haute que les autres.
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 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 lignes
// cette cellule d'index 1 sera 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";
}
Comme précédemment, nous ne créons effectivement que trois cellules au lieu de quatre dans la seconde ligne car une des cellules de la première ligne a la hauteur de deux cellules.
Lien : Exemple d'utilisation de ce script
Lien : Comment ajouter une ligne dans une table ?
On utilise la fonction DOM insertRow(). L'utilisation de la propriété innerHTML est déconseillée dans ce cas. On considère trois cas de figure :
- insertion à la fin de la table ;
- insertion au début de la table ;
- insertion à un index défini.
Imaginons cette table :
<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>
Insertion à la fin de la table
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 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";
}
Insertion au début de la table
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 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";
}
Insertion à un index défini
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 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";
}
Pour supprimer une ligne dans un tableau (ou table), on considère trois 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).
On utilise la fonction DOM deleteRow().
Imaginons cette table :
<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>
Suppression à la fin
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)
}
}
Suppression au début
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)
}
}
Suppression d'une ligne définie par son index dans la table (entre 0 et n-1)
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 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
}
}
Si on veut modifier la valeurBonjour, il suffit de faire :
document.getElementById('cel').innerHTML = "Au revoir";
Nous pouvons obtenir une scrollbar à gauche en ajoutant une div autour du tableau, contrôlant le défilement dans celui-ci :
<div dir="rtl" style="height:100px;overflow-y:scroll;">
<table border="1" style="width:100%" dir="ltr">
<tr>
<td> bla bla bla bla</td>
<td> bla bla bla bla</td>
<td> bla bla bla bla</td>
</tr>
</table>
</div>
C'est l'attribut dir="rtl" qui permet d'inverser la position de la scrollbar (rtl = right to left). Avec cet attribut, la barre de défilement est à gauche mais le texte de la table s'écrit également de droite à gauche (mis en évidence par l'attribut width:100% sur la table). Par conséquent, il faut ajouter dans la balise table l'attribut inverse : dir="ltr".