IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Contributions JavaScript / AJAX Discussion :

Les tableaux (balise table) [Fait]


Sujet :

Contributions JavaScript / AJAX

  1. #1
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut Les tableaux (balise table)
    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
    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

    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

  2. #2
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    Aucune remarque à formuler ?

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut


    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.

  4. #4
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    Citation Envoyé par NoSmoking Voir le message

    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 ?

  5. #5
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    Trois Q/R me semble mieux.

  6. #6
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    Citation Envoyé par vermine Voir le message
    Trois Q/R me semble mieux.
    Je vais préparer ça.

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    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);
    }

  8. #8
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    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)

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    (...)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..

  10. #10
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    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.

  11. #11
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    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.

    Comment insérer des cellules dans un tableau ?
    On peut considérer 3 cas de figure :
    1. insérer de cellules "simples" ;
    2. fusion horizontale de cellules ;
    3. 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).

  12. #12
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    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 :
    1. insertion à la fin de la table ;
    2. insertion au début de la table ;
    3. 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]

  13. #13
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    Comment supprimer une ligne dans une table ?
    On considère 3 cas de figure :
    1. suppression à la fin ;
    2. suppression au début ;
    3. 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>

  14. #14
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    remarque 1
    Je supprimerais le <!-- et //--> qui sont une subsistance du passé dans les balises SCRIPT et STYLE.

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

  15. #15
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    remarque 1
    Je supprimerais le <!-- et //--> 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.

  16. #16
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    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.

    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>

    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

  17. #17
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut


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

  18. #18
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    Citation Envoyé par vermine Voir le message


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

  19. #19
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    A priori je les tague en [Fait] mais on peut changer en [Résolu] si tu préfères.

  20. #20
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    Citation Envoyé par vermine Voir le message
    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]

Discussions similaires

  1. Réponses: 3
    Dernier message: 21/01/2009, 23h47
  2. [Conception] Table multidimensionnelle (comme pour les tableaux) ?
    Par dolfy dans le forum PHP & Base de données
    Réponses: 6
    Dernier message: 06/10/2008, 11h36
  3. Réponses: 14
    Dernier message: 01/09/2003, 23h46
  4. Les tableaux en PL/SQL
    Par GRUMLY dans le forum PL/SQL
    Réponses: 5
    Dernier message: 12/08/2002, 19h10

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo