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 23 722 fois - Téléchargée 2 464 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
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
35481
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 mai 2022
 356
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
35481
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 mai 2022
 356
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 ;)
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)