Ajouter ou supprimer une ligne d'un table avec jquery

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

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)