5568 sujets

Sémantique web et HTML

[Résolu] Dupliquer un bloc DIV grace à un bouton

Bonjour, je dois réaliser une duplication de bloc div grace à un boutton j 'ai réaliser ce code 

<?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="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.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>




Et je trouve pas mon erreur, une aide serai la bienvenue
Modifié par AquaLys (10 Feb 2017 - 11:31)
Essayer de fermer la balise script lorsque vous incluez le cdn jquery. Et ouvrir une balise script pour la fonction.
Donc <script> appel jquey via cdn </script> puis <script> function </script>

Le mieux est:
1 - placer tout le code jquery dans un ficher externe. Pas de onclick sur les éléments HTML
2- mettre le cdn avant la balise de fermeture </body>
3- mettre le fichier js externe après la balise de script cdn

Comme ceci:
https://jsfiddle.net/drpc0jLm/3/
Il y a encore un problème, il me l'affiche 3 fois je voudrais qu il me l'affiche que une fois c est possible ?
Bonjour,

A priori votre :first n'est pas prit en compte, vous devriez concentrer vos recherches sur ce point.

Je ne connais rien à Jquery mais en JS ça donnerai un truc du genre
first_element_only = document.getElementsByClassName('copycat')['0'];
/** pour n'avoir que le premier élément copycat
     ensuite j'ordonnerais le clonage *//
Sujet clos
Aller à