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

JavaScript Discussion :

Supprimer une ligne selectionnée dans un tableau


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Inscrit en
    Septembre 2010
    Messages
    35
    Détails du profil
    Informations forums :
    Inscription : Septembre 2010
    Messages : 35
    Par défaut Supprimer une ligne selectionnée dans un tableau
    Bonsoir chers tous, En effet j'aimerais supprimer une ligne sélectionnée par ma fonction supprimerligne. Il faut dire que les lignes du tableau sont générés automatiquement et dans une colonne on met dynamiquement à travers le code javascript un bouton par ligne de suppression. Apparemment mon paramètre(this.parentNode.rowIndex) que je passe n'est pas exacte.Veuillez bien m'aider.Merci d'avance.
    Code : 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
    <?php 
    include ("haut.php");
     
    if (isset($_POST['btndemande'])) { 
            echo "aaaa";
            include("insertiondemande.php");
     
            }
    ?>
     <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
            <script type="text/javascript" src="liste.js"></script>
    		<div class="col-sm-8 text-left"> 
    <script language="JavaScript">
    function ajouterLigne()
    { 
    	var tableau = document.getElementById("contenub");
     
    	var ligne = tableau.insertRow(-1);//on a ajouté une ligne
     
    	var colonne1 = ligne.insertCell(0);//on a une ajouté une cellule
    	colonne1.innerHTML += document.getElementById("localite_deux").value;//on y met le contenu de titre
    var select = document.getElementById("localite_deux" );
     
    var valeur = select.options[select.selectedIndex].text;
    	var colonne2 = ligne.insertCell(1);//on ajoute la seconde cellule
    	colonne2.innerHTML +=valeur; 
     
     
     
    	var colonne3 = ligne.insertCell(2);//on ajoute la troisieme cellule
    	colonne3.innerHTML +=document.getElementById("quantite").value;
    	var rowNumber = document.getElementById("tableau").rows.length
    	var colonne4= ligne.insertCell(3);//on ajoute la quartrieme cellule
    	colonne4.innerHTML +=rowNumber-1;
     
    var colonne5= ligne.insertCell(4);//on ajoute la quartrieme cellule
    	colonne5.innerHTML +='<input type="button" onclick="supprimerLigne(this.parentNode.rowIndex);" value="supprimer"/>'
     
    }
     
    function supprimerLigne(num)
    {var num1=num+1;
    	document.getElementById("contenub").deleteRow(num);
    }
          </script>
     <select id="localite_un">
            	<option value="">Choisir la famille</select>
            </select>
            <select id="localite_deux">
            	<option value="">Choisir l'article</select>
            </select>
     
                   <label for="textdirection"> Quantité:</label>
    			   <input type="numerique" name="Quantité" id="quantite">
     
    			   <br><input type="submit" name ="btndemande" value= "créer une demande" class="btn btn-primary" >
    			    <button type="reset" name="annuler" value="annuler" class="btn btn-primary">Annuler</button>
     
    				<input type="button" onclick="ajouterLigne();" value="Enregistrer"/>
     
    <div dir="rtl" style="height:100px;overflow-y:scroll;">
     
    <table id="tableau" border="1"  style="width:100%" dir="ltr">
    	<thead>
    		<tr>
    			<th>Article</th>
    			<th>libelle</th>
    			<th>Quantite</th>
    			<th>numero de ligne</th>
    			<th>supprimer</th>
     
    			</tr>
    	</thead>
    	<tbody id="contenub">
     
    	</tbody>
    </table>
    </div>
    </form>
     
     
     
     
     
        </div>
     
     
     
    <?php 
    include ("bas.php")
    ?>

  2. #2
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2017
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 32
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juillet 2017
    Messages : 81
    Par défaut
    De mémoire, il me semble que deleteRow doit être executer sur la balise table et pas tbody.
    Dans ton exemple ça donnerait quelque chose du genre :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function supprimerLigne(num)
    {var num1=num+1;
    	document.getElementById("tableau").deleteRow(num);
    }
    en espérant t'avoir aidé.

  3. #3
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut


    Codes corrigés :

    Code JavaSript : 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
    function ajouterLigne() {
        var tableau = document.getElementById("contenub");
     
        var ligne = tableau.insertRow(-1); //on a ajouté une ligne
     
        var colonne1 = ligne.insertCell(0); //on a une ajouté une cellule
     
        colonne1.innerHTML += document.getElementById("localite_deux").value; //on y met le contenu de titre
     
        var select = document.getElementById("localite_deux");
     
        var valeur = select.options[select.selectedIndex].text;
        var colonne2 = ligne.insertCell(1); //on ajoute la seconde cellule
     
        colonne2.innerHTML += valeur;
     
        var colonne3 = ligne.insertCell(2); //on ajoute la troisieme cellule
     
        colonne3.innerHTML += document.getElementById("quantite").value;
     
        var rowNumber = document.getElementById("tableau").rows.length
        var colonne4 = ligne.insertCell(3); //on ajoute la quartrieme cellule
     
        colonne4.innerHTML += rowNumber - 1;
     
        var colonne5 = ligne.insertCell(4); //on ajoute la quartrieme cellule
     
        colonne5.innerHTML +=
            '<input type="button" onclick="supprimerLigne(this.parentNode.parentNode.rowIndex);" value="supprimer"/>' // this.parentNode c'est td
    }
     
    function supprimerLigne(num) {
     
        //console.log( num );
     
        //var num1 = num + 1;
     
        document.getElementById("contenub").deleteRow(num);
    }

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  4. #4
    Membre averti
    Inscrit en
    Septembre 2010
    Messages
    35
    Détails du profil
    Informations forums :
    Inscription : Septembre 2010
    Messages : 35
    Par défaut
    En effet j'ai essayé les deux propositions.La première (application de deleterow sur la table) supprime l'entête du tableau. Pour la seconde(this.parentNode.parentNode) rien ne se passe. voila la solution (encadrer le bouton supprimer par un td :

    Code : 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
     
     
    <?php 
    include ("haut.php");
     
    if (isset($_POST['btndemande'])) { 
            echo "aaaa";
            include("insertiondemande.php");
     
            }
    ?>
     <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
            <script type="text/javascript" src="liste.js"></script>
    		<div class="col-sm-8 text-left"> 
    <script language="JavaScript">
    function ajouterLigne()
    { 
    	var tableau = document.getElementById("tableau");
     
    	var ligne = tableau.insertRow(-1);//on a ajouté une ligne
     
    	var colonne1 = ligne.insertCell(0);//on a une ajouté une cellule
    	colonne1.innerHTML += document.getElementById("localite_deux").value;//on y met le contenu de titre
    var select = document.getElementById("localite_deux" );
     
    var valeur = select.options[select.selectedIndex].text;
    	var colonne2 = ligne.insertCell(1);//on ajoute la seconde cellule
    	colonne2.innerHTML +=valeur; 
     
     
     
    	var colonne3 = ligne.insertCell(2);//on ajoute la troisieme cellule
    	colonne3.innerHTML +=document.getElementById("quantite").value;
    	var rowNumber = document.getElementById("tableau").rows.length
    	var colonne4= ligne.insertCell(3);//on ajoute la quartrieme cellule
    	colonne4.innerHTML +=rowNumber-1;
    var numo=rowNumber-1;
    var colonne5= ligne.insertCell(4);//on ajoute la quartrieme cellule
    	colonne5.innerHTML +='<td><input type="button" onclick="supprimerLigne(this.parentNode.parentNode.rowIndex);" value="supprimer"/></td>'
     
    }
     
    function supprimerLigne(num)
    {var num1=num+1;
    	document.getElementById("tableau").deleteRow(num);
    }
          </script>
     <select id="localite_un">
            	<option value="">Choisir la famille</select>
            </select>
            <select id="localite_deux">
            	<option value="">Choisir l'article</select>
            </select>
     
                   <label for="textdirection"> Quantité:</label>
    			   <input type="numerique" name="Quantité" id="quantite">
     
    			   <br><input type="submit" name ="btndemande" value= "créer une demande" class="btn btn-primary" >
    			    <button type="reset" name="annuler" value="annuler" class="btn btn-primary">Annuler</button>
     
    				<input type="button" onclick="ajouterLigne();" value="Enregistrer"/>
     
    <div dir="rtl" style="height:100px;overflow-y:scroll;">
     
    <table id="tableau" border="1"  style="width:100%" dir="ltr">
    	<thead>
    		<tr>
    			<th>Article</th>
    			<th>libelle</th>
    			<th>Quantite</th>
    			<th>numero de ligne</th>
    			<th>supprimer</th>
     
    			</tr>
    	</thead>
    	<tbody id="contenub">
     
    	</tbody>
    </table>
    </div>
    </form>
     
     
     
     
     
        </div>
     
     
     
    <?php 
    include ("bas.php")
    ?>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [VBA] Comment supprimer une ligne entiere dans excel
    Par babouoles dans le forum Macros et VBA Excel
    Réponses: 16
    Dernier message: 06/07/2017, 08h34
  2. Réponses: 2
    Dernier message: 07/12/2007, 16h32
  3. Réponses: 5
    Dernier message: 25/06/2007, 09h51
  4. [MySQL] Supprimer une ligne afficher dans une base de donnée
    Par julienchpt dans le forum PHP & Base de données
    Réponses: 31
    Dernier message: 14/10/2005, 15h45
  5. [HTML] Se placer à une ligne précise dans un tableau
    Par seb55555 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 28/10/2004, 15h06

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