Disparition de balise ?

Bonjour,

je suis quelque peu nouveau dans le monde de Jquery et visiblement un peu trop :/

j''ai un formulaire auquel j'ajoute des ligne par un clic sur un bouton :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<h3>Ajuster le nombre de lignes nécessaire <a class="btn" onclick="Affichage()"><i class="icon-plus"></i></a>  <a class="btn" onclick="Remove()"><i class="icon-minus"></i></a> </h3>
                             <?php $ligne =' <tr>
<td><input  name="Date[]" placeholder="jj/mm" class="span4"></td>
<td><input  name="Motif[]" class="span10">&nbsp;</td>
<td><input  name="Km[]" class="span4" ></td>
<td><select name="Type[]" class="span5">
<option value ="" selected="selected"></option>
<option value="D">Valorisation kms voiture</option>
<option value="E">Transport (SNCF, Taxi, Péage, Parking)</option>
<option value="F">Frais hébregement (Hôtel, Repas)</option>
<option value="G">Autre frais</option>
</select></td>
<td><input name="Montant[]" class="span4"></td>
</tr>';
?>
 
                       <form action="CreaExcel.php" method="post" id="frais">
                 <table class="table">
                    <thead>
                        <th>Date</th>
                        <th>Motif & lieu du deplacement</th>
                       <th>Kms</th>
                       <th>Type de frais</th>
                       <th>Montant</th>
                     </thead>                  
                     <tbody>
                        <?php echo $ligne ?>   
                      </tbody>
                 </table>
                      <button class="btn btn-primary btn-large" type="submit" name="boutton">Valider</button>
                      </form>

Donc là pas de souci le tableau est tout beau cependant si l'utilisateur souhaite supprimer un ligne alors qu'il n'y en a qu'une d'afficher, je n'ai plus rien, forcement. mais je ne peux plus dupliquer la première ligne également ! puisqu'elle n'existe plus.

je stock donc les données nécessaire dans un div invisible :

Code:

<div style="display: none" id="template"><?php echo $ligne ?></div>

quand j'appelle ma fonction Jquery :

Code:

1
2
3
4
5
6
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    function Affichage() {
      $('#frais').find('tbody').append($('#template').html());
 
}

le code se rajoute bien à la suite mais mes <tr> et mes <td> on disparu !!
je me retrouve donc avec une mise en page désastreuse.
si vous avez une idée :)

là tu appendes du html ...
tu devaris soit mettre du html
ou appender un objet DOM
essaye:

Code:

$('#frais').find('tbody').append($($('#template').html()));

ou

Code:

$('#frais').find('tbody').html($('#template').html());

Code:

$('#frais').find('tbody').append($('#template').html());

Le problème vient surtout du fait que tu essayes d'ajouter une balise <div> comme enfant direct d'une balise <tbody>, ce n'est pas autorisé et le navigateur essaye de se débrouiller pour comprendre ce que tu veux faire.
Donc pour lui, tu veux insérer une <div>, l'emplacement indiqué est incorrect car c'est dans une <table>, il ferme donc la table pour pouvoir répondre à ta demande et insère la div. Ensuite, lors de l'insertion, la <div> contient des balises <tr> et <td> interdites, elles sont donc puement et simplement supprimées.

Bref, lorsque l'on insère des éléments dans le DOM, il est fondamental de s'assurer que le résultat soit conforme aux règles HTML faute de quoi, les résultats sont incertains...