Ajouter ou supprimer une ligne d'un table avec jquery

Soyez le premier à donner votre avis sur cette source.

Vue 19 547 fois - Téléchargée 2 272 fois

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>

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

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 =)
Messages postés
8
Date d'inscription
dimanche 6 juin 2010
Statut
Membre
Dernière intervention
10 novembre 2016

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.
Messages postés
29558
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 septembre 2020
337 >
Messages postés
8
Date d'inscription
dimanche 6 juin 2010
Statut
Membre
Dernière intervention
10 novembre 2016

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)
Messages postés
8
Date d'inscription
dimanche 6 juin 2010
Statut
Membre
Dernière intervention
10 novembre 2016
>
Messages postés
29558
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 septembre 2020

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 ;)
Messages postés
29558
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 septembre 2020
337 >
Messages postés
8
Date d'inscription
dimanche 6 juin 2010
Statut
Membre
Dernière intervention
10 novembre 2016

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.
Afficher les 9 commentaires

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.