Soutenez-nous

FAQ JavaScriptConsultez toutes les FAQ

Nombre d'auteurs : 43, nombre de questions : 176, dernière mise à jour : 19 décembre 2013 

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

 
Sélectionnez
<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.

 
Sélectionnez
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.

 
Sélectionnez
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.

 
Sélectionnez
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.

Créé le 22 février 2013  par Auteur, NoSmoking, vermine

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 :

 
Sélectionnez
<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

 
Sélectionnez
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

 
Sélectionnez
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

 
Sélectionnez
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(" 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";
}
Mis à jour le 22 février 2013  par simone.51, Auteur, NoSmoking

Lien : Exemple d'utilisation de ce script

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 :

 
Sélectionnez
<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

 
Sélectionnez
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

 
Sélectionnez
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)

 
Sélectionnez
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
    }
}
Créé le 22 février 2013  par Auteur, NoSmoking

Lien : Exemple d'utilisation de ce script

 
Sélectionnez
<table>
    <tr>
        <td id="cel">Bonjour</td>
    </tr>
</table>

Si on veut modifier la valeurBonjour, il suffit de faire :

 
Sélectionnez
document.getElementById('cel').innerHTML = "Au revoir";
Créé le 2 juillet 2005  par simone.51

Nous pouvons obtenir une scrollbar à gauche en ajoutant une div autour du tableau, contrôlant le défilement dans celui-ci :

 
Sélectionnez
<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".

Mis à jour le 6 mars 2013  par SpaceFrog, Arno_94, Auteur

Lien : Exemple d'utilisation de ce script

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2004 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.