Sujet Précédent Sujet Suivant

Comment ajouter ou supprimer une ligne en utilisant jquery et ja

LAHCEN CHAKOUR Messages postés 4 Date d'inscription dimanche 30 décembre 2012 Statut Membre Dernière intervention 6 avril 2015 - 6 avril 2015 à 03:32
AIDExpress Messages postés 8 Date d'inscription dimanche 6 juin 2010 Statut Membre Dernière intervention 10 novembre 2016 - 10 nov. 2016 à 21:45
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.

https://codes-sources.commentcamarche.net/source/100973-comment-ajouter-ou-supprimer-une-ligne-en-utilisant-jquery-et-ja
AIDExpress Messages postés 8 Date d'inscription dimanche 6 juin 2010 Statut Membre Dernière intervention 10 novembre 2016
10 nov. 2016 à 21:45
Ok merci j'ai compris pour le SELECTEURS.
Je ne savais pas que cela prenait ce terme, alors évidement maintenant les recherche Google sont plus simple =)
Grand merci jordan =)
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
Modifié par jordane45 le 10/11/2016 à 19:50
Tu peux retirer le console.log
C'est une instruction qui permet d'afficher des informations dans la CONSOLE de ton navigateur (histoire de debuguer par exemple) et elle risque de provoquer des erreurs sur Internet explorer.

Pour ce qui est de la différence entre les deux syntaxe de la fonction... c'est facile à trouver sur le net !!
Regarde les "SELECTEURS" jquery.
AIDExpress Messages postés 8 Date d'inscription dimanche 6 juin 2010 Statut Membre Dernière intervention 10 novembre 2016
10 nov. 2016 à 19:18
Bonjour jordan45,
Merci beaucoup. Tout fonctionne.
Si vous me permettez un dernière question, à quoi sert console.log ("confirmation"); et quel est la différence entre $("#tab_aaa>tbody tr...et $("#tab_aaa tbody tr... ?
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
10 nov. 2016 à 17:00
Comme indiqué précédemment.. à l'avenir.. merci d'ouvrir une question sur le forum au lieu de "polluer" les commentaires des sources.

Mais bon.
Voici un code fonctionnel et amélioré 
<table width="100%" border="2" cellspacing="2" cellpadding="2">
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td>
    
    <table id="tab_aaa" width="100%" border="1" cellspacing="1" cellpadding="1">
      <thead>
        <tr>
          <th>
            <input id="supp" value="-" type="button">
            <input id="ajout" value="+" type="button">
          </th>
          <th>AAAAA</th>
          <th>BBBBB</th>
          <th>CCCCC</th>
          <th>DDDDD</th>
          <th>EEEEE</th>
          <th>FFFFF</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
    
    </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
</table>


<script type="text/javascript">
  $("#ajout").click(function () {
  
    var nbTR = $("#tab_aaa>tbody tr").length +1;
    var newLine = "<tr>"
                  + "<td><input class='ch' type='checkbox' id='chk_"+nbTR+"' /></td>" 
                  + "<td>ligne :"+nbTR+"</td>" 
                  + "<td>hgfhf</td>" 
                  + "<td>152.15</td>" 
                  + "<td>3</td>" 
                  + "<td>10%</td>" 
                  + "<td>453</td>"
                  +"</tr>";                           
    $("#tab_aaa>tbody:last").append(newLine);	  
	});
  
$("#supp").click(function () {
	if(confirm("Voulez-vous supprimer" )){
		console.log ("confirmation");
    $("#tab_aaa>tbody tr:has(input:checked)").remove();		
  }
});
</script>


NB : Bien entendu.. tu auras au préalable chargé JQUERY dans ta page.
AIDExpress Messages postés 8 Date d'inscription dimanche 6 juin 2010 Statut Membre Dernière intervention 10 novembre 2016
10 nov. 2016 à 15:25
Bonjour jordan45 et merci pour votre retour,

Je vous avoue que cela fait un moment que je me prends la tête avec mon problème et j’ai complètement zappez de poser ma question dans le forum.

J’ai corrigé mon code mais cela ne fonctionne toujours pas. Au lieu de me supprimer tout mon tableau, avec ce code cela me supprime… rien du tout.

Je vais mettre un post dans le forum pour continuer cette discussion.

PS : pour votre PS, pour le moment je me préoccupe de mon code. Pour ce qui est des textes je me serais aperçu de cette erreur qui ne vient pas de moi mais du copier/coller du post de marwein ;)
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
10 nov. 2016 à 09:45
Bonjour,

Les questions... il vaut mieux les poser dans le forum au lieu de les mettre dans les commentaires des sources.
Concernant ton code.. il suffit de préciser l'ID du tableau concerné par la suppression.

un truc du genre : 
$("#supp").click(function () {
	if(confirm("vous les vous supprimer")==true)
		$("#tab_prodl tr:has(input:checked)").remove();		
});


PS : 
if(confirm("vous les vous supprimer")==true)

Sera mieux écrit comme ceci : 
if(confirm("voulez vous supprimer")==true)
AIDExpress Messages postés 8 Date d'inscription dimanche 6 juin 2010 Statut Membre Dernière intervention 10 novembre 2016
10 nov. 2016 à 02:04
Bonjour,

Mon tableau est dans un autre tableau et quand j'utilise votre exemple c'est tout mon sous tableau qui disparait. 

$("#ajout").click(function () {
	$("#tab_prodl>tbody:last").append("<tr><td><input class='ch' type='checkbox' /></td><td>" 
		+ "fefeé" + "</td><td>" 
		+ "hgfhf" + "</td><td>" 
		+ "152.15" + "</td><td>" 
		+ "3" + "</td><td>" 
		+ "10%" + "</td><td>" 
		+ "453" + "</td></tr>"
				);
				
	  
	});
$("#supp").click(function () {
	if(confirm("vous les vous supprimer")==true)
		$("tr:has(input:checked)").remove();		
});



<table width="100%" border="2" cellspacing="2" cellpadding="2">
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td>
    
<table id="tab_aaa" width="100%" border="1" cellspacing="1" cellpadding="1">
  <thead>
    <tr>
      <td><input id="supp" value="-" type="submit"><input id="ajout" value="+" type="submit"></td>
      <td>AAAAA</td>
      <td>BBBBB</td>
      <td>CCCCC</td>
      <td>DDDDD</td>
      <td>EEEEE</td>
      <td>FFFFF</td>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
    
    </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
</table>


Comment faire ?
Comment ajouter un bouton au lieu d'une checkbox et au clique de celle-ci, supprimer la ligne correspondante ?

Merci.
marwein Messages postés 1 Date d'inscription jeudi 30 avril 2015 Statut Membre Dernière intervention 30 avril 2015
30 avril 2015 à 13:32
tu peux faire aussi comme suit 
<html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"
        rel="stylesheet" type="text/css">
        <link href="http://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css"
        rel="stylesheet" type="text/css">
        <script>
            $(function () {
    
                $("#add").click(function () {                
    
                    $("#t>tbody:last").append("<tr><td class=\"col-sm-3\">" + $("#d").val() + "</td><td class=\"col-sm-3\">" + $("#p").val() + "</td><td class=\"col-sm-3\">" + $("#q").val() + "</td><td><button class=\"btn btn-danger\">Supprimer</button></td></tr>");
                    
                });
    		
                $("#f").submit(function(){
    	            return false;
    	        });
    
                $("#Sup").click(function () {
    		
    		        if(confirm("vous les vous supprimer")==true)
    		        $("tr:has(input:checked)").remove();		
                });
    	        var c={
    		        'diplay':'inline-block'
    		        };
    		
    	        $("ul li").css(c);
            });
        </script>
    </head>
    
    <body>
        <div class="section">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <form class="form-horizontal" role="form" id="f">
                            <div class="form-group">
                                <div class="col-sm-2">
                                    <label for="d" class="control-label">Produit</label>
                                </div>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="d" placeholder="Produit" required="">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-2">
                                    <label for="p" class="control-label">Prix</label>
                                </div>
                                <div class="col-sm-10">
                                    <input type="number" class="form-control" id="p" placeholder="Prix" required=""
                                    step="any">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-2">
                                    <label for="a" class="control-label">Quantité</label>
                                </div>
                                <div class="col-sm-10">
                                    <input type="number" class="form-control" id="q" placeholder="Quantité"
                                    required="">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button class="btn btn-success" id="add" type="submit">Ajouter</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <table class="table" id="t">
                            <thead>
                                <tr>
                                    <th class="col-sm-3">Produit</th>
                                    <th class="col-sm-3">Prix</th>
                                    <th class="col-sm-3">Quantité</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>
Whismeril Messages postés 19024 Date d'inscription mardi 11 mars 2003 Statut Contributeur Dernière intervention 18 avril 2024 656
6 avril 2015 à 10:06
Bonjour merci de décrire à quoi sert ce code, et d'utiliser la coloration syntaxique.

Discussions similaires

chronometre en milliseconde
sarici -
sarici -

3 réponses
Calcul de dérivée
darkjedi1024 -
lamri11111 -

19 réponses
macro, supprimer une feuille Excel SANs confirmation...
Bruno_65 -
Bruno_65 -

2 réponses
simplifier une fraction ( débutant ) !!!
myogtha -
GoldenEye -

3 réponses
Modélisation/simulation schéma électrique
JuniorJdd -
Whismeril -

15 réponses
Rejoignez-nous