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

jQuery Discussion :

Boutons Retirer ligne d'un tableau si c'est la dernière du tableau


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Inscrit en
    Juin 2008
    Messages
    95
    Détails du profil
    Informations forums :
    Inscription : Juin 2008
    Messages : 95
    Par défaut Boutons Retirer ligne d'un tableau si c'est la dernière du tableau
    Bonjour à tous,

    Etant débutant javascript, j'ai besoin d'aide pour comprendre comment faire pour ajouter / retirer une ligne d'un tableau html en javascript et surtout afficher un bouton retirer dans la dernière colonne du tableau lorsque la ligne n'est pas la dernière ligne du tableau.

    Pouvez-vous m'aider svp ?

    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
    <table id='instanceTable'>
    		<tr>
    			<td>Header 1
    			</td>
    			<td>
    				Actions
    			</td>
    		</tr>
    </table>
     
    <script type='text/javascript'>
    $('#add_row').click(function(event) {
    $('<tr>'
    		+'<td>Column 1</td>'
    		+'Si dernière ligne du tableau <button id=add_row>Ajouter</button>
    		+'Sinon	<button id=rem_row>Retirer</button>'
       +'</tr>').appendTo('#instanceTable');
    });
    </script>
    Merci d'avance

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

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    bonjour,

    voici un exemple (message n°2 de la discussion) qui répondra à ta question :
    http://www.developpez.net/forums/d33...ligne-tableau/

  3. #3
    Membre confirmé
    Inscrit en
    Juin 2008
    Messages
    95
    Détails du profil
    Informations forums :
    Inscription : Juin 2008
    Messages : 95
    Par défaut
    Bonjour et merci Auteur,

    J'ai réussi à faire quelque chose de pas trop mal en partant d'abord des informations que tu m'as donné, et par la suite avec jquery.

    Ce que j'aimerais faire : j'ajoute une ligne de tableau, la dernière colonne contient les boutons pour ajouter / retirer une nouvelle ligne=> Cela fonctionne pour la première ligne mais pas pour les autres.

    Voici mon code :
    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
    <script type="text/javascript" src="jquery.min.js"></script>
    <table id="table">
    	<tbody>
    		<tr>
    			<th> Label</th>
    			<th> Actions </th>
    		</tr>
    		<tr>
    			<td><div class="input select">
    				<select name="label" id="combobox">
    					<option value="1">Option 1</option>
    					<option value="2">Option 2</option>
    				</select>
    				</div>
    			</td>
    			<td>
    				<a class="del_row" id="">Del</a>
    				<a class="add_row" id="">Add</a>
    			</td>
    		</tr>
    	</tbody>
    </table>
    <script type="text/javascript">
    $('table td a.del_row').click(function(){
    	event.preventDefault();
    	$(this).parent().parent().remove();
    });
    $('table td a.add_row').click(function(){
    	$(this).parent().parent().after('<tr><td><div class="input select">'
    				+'<select name="label" id="combobox">'
    				+'	<option value="1">Option 1</option>'
    				+'	<option value="2">Option 2</option>'
    				+'</select>'
    			+	'</div>'
    			+	'</td>'
    			+'<td>'
    			+	'<a class="del_row" id="">Del</a>'
    			+'<a class="add_row" id="">Add</a>'
    			+'</td></tr>');
    });
    </script>
    Un petit coup de main svp ? J'y suis presque

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

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    Citation Envoyé par Goffer Voir le message

    Un petit coup de main svp ? J'y suis presque
    jquery et moi ça fait deux


    Le symptôme que tu décris laisse à penser que tu ne donnes pas à la fonction de suppression l'objet à supprimer.

    Dans mon code et la fonction ajoutLigne(), j'ai
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    var ligne = tableau.insertRow(-1); // création d'une ligne
    // suite du code...
    bouton.onclick = function(){suppression(ligne)};// objet transmis à la fonction de suppression
    et dans la fonction de suppression :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    function suppression(ligne)
    {
      document.getElementById('tableau').deleteRow(ligne.rowIndex);
     
    // suite du code...

    tu es obligé de passer par JQuery ?

  5. #5
    Membre confirmé
    Inscrit en
    Juin 2008
    Messages
    95
    Détails du profil
    Informations forums :
    Inscription : Juin 2008
    Messages : 95
    Par défaut
    J'ai compris d'où venait mon soucis. Il fallait passer la fonction en argument de la fonction "live" (http://api.jquery.com/live/) :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    $('table td a.add_row').live('click', function(){
    au lieu de :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $('table td a.add_row').click(function(){
    Le problème est donc résolue

    Auteur, je préfère utiliser jquery qui simplifie énormément le travail pour un noob du javascript comme moi. Je trouve que c'est plus simple à utiliser merci pour ton aide en tout cas !

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

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    Citation Envoyé par Goffer Voir le message
    Auteur, je préfère utiliser jquery qui simplifie énormément le travail pour un noob du javascript comme moi. Je trouve que c'est plus simple à utiliser merci pour ton aide en tout cas !
    Ne perds pas de vue que JQuery est du javascript. Je te conseille de ne pas céder à la facilité et de voir les bases javascript car ces bases te seront toujours utiles.
    Réserve les libraires pour réaliser des choses plus complexes car à force d'utiliser des librairies "pour te faciliter la vie" tu vas finir par utiliser JQuery seulement pour un document.getElementById(), ce qui serait vraiment sans intérêt.

Discussions similaires

  1. Réponses: 10
    Dernier message: 28/03/2011, 16h01
  2. Réponses: 2
    Dernier message: 03/03/2009, 08h32
  3. Ajout bouton + insertion ligne + infos ligne
    Par Angeldu74 dans le forum Macros et VBA Excel
    Réponses: 5
    Dernier message: 09/09/2008, 10h41
  4. Tester quelle est la dernière ligne d'un tableau pour la remplir ?
    Par drthodt dans le forum Macros et VBA Excel
    Réponses: 9
    Dernier message: 29/07/2008, 13h26
  5. supprimer ligne tableau si A est vide
    Par flyhb dans le forum Macros et VBA Excel
    Réponses: 4
    Dernier message: 17/03/2008, 23h30

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