Ajouter ou supprimer une ligne d'un table avec jquery
Soyez le premier à donner votre avis sur cette source.
Vue 17 562 fois - Téléchargée 2 107 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 dynamiquement ligne tableau javascript
- Ajouter une ligne à un tableau html en javascript - Meilleures réponses
- Jquery table - Meilleures réponses
- Supprimer une ligne d'une table sql en php - Forum - PHP
- Ajouter supprimer une ligne d'un datagridview ✓ - Forum - C# / .NET
- Ajouter une ligne dans une table sql - Forum - C# / .NET
- Interface ajouter,modifier,supprimer et rechercher /mysql ✓ - Forum - PHP
- Ajouter modifier supprimer datagridview c# ✓ - Forum - ASP / ASP.NET
Commentaires
Je ne savais pas que cela prenait ce terme, alors évidement maintenant les recherche Google sont plus simple =)
Grand merci jordan =)
Mon tableau est dans un autre tableau et quand j'utilise votre exemple c'est tout mon sous tableau qui disparait.
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
- 27575
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 17 février 2020
323 > AIDExpressLes 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
> jordane45Je 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
- 27575
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 17 février 2020
323 > AIDExpressMais 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.
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.