Dupliquer un bloc DIV grace à un bouton

Sujet résolu

10 février 2017 à 10:24:03

Bonjour, Jai le code suivant pour mon projet:

 <div id="AfficherBudget">
    <table id="TableauBudget">
        <tr>
            <td colspan="2">Total des charges </td>
            <td colspan="2">Total des produits</td>
            <td colspan="2" rowspan="2">Solde</td>
           
        </tr>
        
        <tr>
            <td>Type</td>
            <td>Montant</td>
            <td>Type</td>
            <td>Montant</td>
        </tr>
        
            
    </table>
    <input id="ChampsBudget" type="text>"<br>
    <input id="ChampsBudget1" type="text>" <br>
    <input id="ChampsBudget2" type="text>"<br>
    <input id="ChampsBudget3" type="text>"<br>
    <input id="ChampsBudget4" type="text>"<br><br>
    <input onclick="Budget" id="button" value="+" type="button">
      </div>

Et je dois en fait le dupliquer le bloc div quand on clique sur le plus, j'ai deja bien cherché sur le net mais aucune piste :/ de l'aide serai vraiment de la bienvenue

merci

Shonen17

10 février 2017 à 10:33:12

Salut,

T'as pas beaucoup regardé alors

$('#AfficherBudget').clone().appendTo($('#AfficherBudget'));

Par contre il va falloir que tu bouge ton bouton. Et aussi que tu enlève les ID pour remplacer par des classes, ou alors pas des ID dynamiques. Enfin t'as encore un peu de taf

testtest234

10 février 2017 à 10:35:54

Tu veux dire quoi par bouger mon bouton ? merci de la réponse en tout cas

Shonen17

10 février 2017 à 10:45:45

Je suis de bonne humeur, je te montre :

Si tu clone la div entière avec le bouton à l'intérieur, le bouton aussi sera dupliqué, et ce n'est pas ce que tu souhaite.

<input onclick="copycat()" id="button" value="+" type="button">
<div id="AfficherBudget">
  <div class="copycat">
    <table id="TableauBudget">
      <tr>
        <td colspan="2">Total des charges </td>
        <td colspan="2">Total des produits</td>
        <td colspan="2" rowspan="2">Solde</td>
      </tr>
      <tr>
        <td>Type</td>
        <td>Montant</td>
        <td>Type</td>
        <td>Montant</td>
      </tr>
    </table>
    <input id="ChampsBudget" type="text>"<br>
    <input id="ChampsBudget1" type="text>" <br>
    <input id="ChampsBudget2" type="text>"<br>
    <input id="ChampsBudget3" type="text>"<br>
    <input id="ChampsBudget4" type="text>"<br><br>
  </div>
</div>

function copycat(){
    $('.copycat:first').clone().appendTo($('#AfficherBudget'));
  }

Exemple

-
Edité par Shonen17 10 février 2017 à 10:47:37

testtest234

10 février 2017 à 10:51:28

J'ai surement fais quelque chose de mal vu que ça ne marche pas :/

<?php
include'include_haut.php';
?>

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="Budget.css" rel="stylesheet" type="text/css"/>
 <script type="text/javascript" src="jquery.js">
  function copycat(){
    $('.copycat:first').clone().appendTo($('#AfficherBudget'));
  }
  </script>
 
 

  <title>Budget</title> 
</head>
<body>
    <input onclick="copycat()" id="button" value="+" type="button">
<div id="AfficherBudget">
  <div class="copycat">
    <table id="TableauBudget">
      <tr>
        <td colspan="2">Total des charges </td>
        <td colspan="2">Total des produits</td>
        <td colspan="2" rowspan="2">Solde</td>
      </tr>
      <tr>
        <td>Type</td>
        <td>Montant</td>
        <td>Type</td>
        <td>Montant</td>
      </tr>
    </table>
    <input id="ChampsBudget" type="text>"<br>
    <input id="ChampsBudget1" type="text>" <br>
    <input id="ChampsBudget2" type="text>"<br>
    <input id="ChampsBudget3" type="text>"<br>
    <input id="ChampsBudget4" type="text>"<br><br>
  </div>
</div>
  
</body>
</html>

Lamecarlate

10 février 2017 à 11:40:37

Sujet déplacé vers le forum JavaScript

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Shonen17

10 février 2017 à 11:47:01

<?php
include'include_haut.php';
?>
 
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="Budget.css" rel="stylesheet" type="text/css"/>
 
  <title>Budget</title>
</head>
<body>
    <input onclick="copycat()" id="button" value="+" type="button">
<div id="AfficherBudget">
  <div class="copycat">
    <table id="TableauBudget">
      <tr>
        <td colspan="2">Total des charges </td>
        <td colspan="2">Total des produits</td>
        <td colspan="2" rowspan="2">Solde</td>
      </tr>
      <tr>
        <td>Type</td>
        <td>Montant</td>
        <td>Type</td>
        <td>Montant</td>
      </tr>
    </table>
    <input id="ChampsBudget" type="text>"<br>
    <input id="ChampsBudget1" type="text>" <br>
    <input id="ChampsBudget2" type="text>"<br>
    <input id="ChampsBudget3" type="text>"<br>
    <input id="ChampsBudget4" type="text>"<br><br>
  </div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 function copycat(){
   $('.copycat:first').clone().appendTo($('#AfficherBudget'));
 }
 </script>
</body>
</html>

Ca devrait mieux fonctionner (balise script mal écrite). Vérifie que jquery.js est bien au même endroit que ton code.

testtest234

10 février 2017 à 11:47:11

Qu'est ce que tu veux dire par là ?

-
Edité par testtest234 10 février 2017 à 11:49:30

Shonen17

10 février 2017 à 12:45:40

<script type="text/javascript" src="jquery.js"></script>

Tu charge ton fichier jquery.js. Il faut que ce fichier soit au même endroit dans ton arborescence que ton fichier .php qui contient tout ce code.

-www/
--images/
---image1.jpg
---image2.jpg
--css/
---style.css
--index.php
--jquery.js

L'erreur que tu dois avoir dans ta console est sûrement "$ is not defined."

-
Edité par Shonen17 10 février 2017 à 12:46:22

testtest234

10 février 2017 à 13:16:47

oui ca marche merci mais j'ai encore un problème il me l'indique 3 fois au lieu de une , une idée de pourquoi ?

Shonen17

20 février 2017 à 9:32:14

testtest234 a écrit:

oui ca marche merci mais j'ai encore un problème il me l'indique 3 fois au lieu de une , une idée de pourquoi ?

Si tu as repris ton arborescence, et non la mienne, oui j'ai ma petite idée.

Tu peux me re-partager ton code corrigé voir ?