Tableau Dynamique JS

Version imprimable

Bonjour à tous,

Voilà je suis sur un petit problème qui m'emcombrent un peu les neuronnes...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table style="border-style:dotted; border-color:#3C4E58;">
<tbody>
	<tr style="border-style:dotted; border-color:#3C4E58;">
	 <td style="width:65%">Désignation</td>
	 <td style="width:17%">Quantité</td>
	 <td style="width:18%">Prix/U</td>
	</tr>
	<div id='cadre'>
		<tr style="border-style:groove; border-color:#3C4E58;">
				<td><input type='text' name='des0' style="width: 95%;"/></td>
				<td><input type='text' name='qte0' style="width: 95%;"/></td>
				<td><input type='text' name='pri0' style="width: 95%;"/></td>
		</tr>
	</div>
</tbody>
</table>
<input type=submit onClick="addInput();" />

Simple tableau html avec deux lignes, le soucis c'est que je veux mettre un nombre de ligne infini en ajoutant une ligne par simple clique sur un bouton.

JavaScript:

Code:

1
2
3
4
5
6
7
8
9
function addInput() {
	var c,c2,contenu
	c = document.getElementById("cadre");
	contenu = document.getElementById("cadre").innerHTML;
	c2	= c.getElementsByTagName('input');
	len = c2.length / 3;
	c.innerHTML = contenu+"<tr style='border-style:groove; border-color:#3C4E58;'><td><input type='text' name='des"+len+"' style='width: 95%;'/></td><td><input type='text' name='qte"+len+"' style='width: 95%;'/></td><td><input type='text' name='pri"+len+"' style='width: 95%;'/></td></tr>";
	//document.getElementById("nb").value = len;
}

Le problème c'est qu'il m'affiche les ligne complètement en dehors ( au dessus ) de mon tableau, rien à faire elles ne veulent pas rentrer dans le tableau...

Quelqu'un aurait un peu de grâce pour m'aider ?

Merci beaucoup

Le HTML du tableau ne convient pas. Ce <div> n'a rien à faire au milieu des <tr>. Corrige le DOM comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table style="border-style:dotted; border-color:#3C4E58;">
<thead>
<tr style="border-style:dotted; border-color:#3C4E58;">
	 <th style="width:65%">Désignation</th>
	 <th style="width:17%">Quantité</th>
	 <th style="width:18%">Prix/U</th>
	</tr>
</thead>
<tbody id="cadre">
	<tr style="border-style:groove; border-color:#3C4E58;">
		<td><input type='text' name='des0' style="width: 95%;"/></td>
		<td><input type='text' name='qte0' style="width: 95%;"/></td>
		<td><input type='text' name='pri0' style="width: 95%;"/></td>
	</tr>	
</tbody>
</table>

Ca devrait déjà aller mieux. Aussi, évite les styles CSS en inline dans le HTML et mets-les plutôt dans une feuille de style séparée.

Merci Sylvain ta syntaxte est plus juste que celle que j'ai trouvé.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<tbody id="cadre">
	<tr style="border-style:dotted; border-color:#3C4E58;">
	 <td style="width:65%">Désignation</td>
	 <td style="width:17%">Quantité</td>
	 <td style="width:18%">Prix/U</td>
	</tr>
        <tr style="border-style:groove; border-color:#3C4E58;">
	  <td><input type='text' name='des0' style="width: 95%;"/></td>
	  <td><input type='text' name='qte0' style="width: 95%;"/></td>
	  <td><input type='text' name='pri0' style="width: 95%;"/></td>
	</tr>
</tbody>