1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Formulaire
  5. Ajouter ou supprimer une ligne d'un table avec jquery

Ajouter ou supprimer une ligne d'un table avec jquery

Soyez le premier à donner votre avis sur cette source.

Vue 21 817 fois - Téléchargée 2 358 fois

Télécharger le projet
Commenter

Description 

<!DOCTYPE html>
<html xmlns="[http://www.w3.org/1999/xhtml]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="Script/jquery-2.1.3.js"> </script>
    <script>
        $(function () {

            $("#add").click(function () {                

                $("#t>tbody:last").append("<tr><td>" + $("#d").val() + "</td><td>" + $("#p").val() + "</td><td>" + $("#q").val() + "</td> <td><input class='ch' type='checkbox' /></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>

<form id="f" method="get" >
  <table width="100%" border="1" id="t" >
      <tbody>
    <tr>
    <td>Description</td>
    <td>Prix</td>
    <td>Quantité</td>
   
     <td>
         <input id="Sup" type="submit" value="Supprimer" />
    </td></tr>
  <tr>
    <td>
        <input id="d" type="text" /></td>
    <td>
        <input id="p" type="text" /></td>
    <td>
        <input id="q" type="text" /></td>
    <td>
        <button id="add">Ajouter</button>
  </tr>
      </tbody>
</table>
</form>
</body>
</html>
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Signaler
Messages postés
8
Date d'inscription
dimanche 6 juin 2010
Statut
Membre
Dernière intervention
10 novembre 2016
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 =)
Signaler
Messages postés
32070
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 avril 2021
 345
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.
Signaler
Messages postés
8
Date d'inscription
dimanche 6 juin 2010
Statut
Membre
Dernière intervention
10 novembre 2016
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... ?
Signaler
Messages postés
32070
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 avril 2021
 345
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.
Signaler
Messages postés
8
Date d'inscription
dimanche 6 juin 2010
Statut
Membre
Dernière intervention
10 novembre 2016
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 ;)
Afficher les 9 commentaires
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (LAHCEN CHAKOUR)