fonction ajout d'une ligne dans un tableau
bonjour,
je suis en se moment en train de faire un site internet avec base de donnée et dans une page(facture) j'ai un tableau avec un code, désignation, P/U, Qte, ..)j'ai essayé (avec un code que j'ai trouvé sur le net) de mettre en place une fonction qui permet l'ajout d'une ligne lorsque celle du dessus est renseignée.
mais aussi d'afficher sur l'écran un petit "+" et un petit "-" pour ajouter ou retirer manuellement une ligne dans le bas du tableau.
la fonction marche pas trop mal mais je n'arrive pas à lui faire faire une ligne correcte dés le début.
il me met une simple zone de texte puis en dessous il me met ma ligne. quand il me rajoute une ligne la ligne créée se retrouve en derniere place dans le tableau:(
je suis sûr que ce n'est pas grand chose mais je ne vois pas ce que c'est.
bon venons en au code :)
voila le JS :
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
32
33
34
35
36
37
| //
function add_ref(i) {
var ref = parseFloat(i) + 1;
if(ref > 10)
{
exit;
}
if(document.getElementById('child'+ref).style.display == "none")
{
document.getElementById('child'+ref).style.display = 'inline';
document.getElementById('ajout').innerHTML = '<a href="javascript:add_ref('+ref+')">+</a>';
document.getElementById('child'+ref).innerHTML += '<br/><span id="labe'+ref+'">#'+ref+'</span><input id="ref'+ref+'" name="ref'+ref+' <tr valign=top><td><INPUT type=text name="codeL" value="" size="17%"></td><td><INPUT type=text name="desiL" value="" size="100%"></td><td><INPUT type=text name="prixhtuL" value="" size="12%"></td><td><INPUT type=text name="QteL" value="" size="13%"></td><td><INPUT type=text name="THTL" value="" size="15%"></td></tr>';
}
if(ref < 2) {
document.getElementById('del').innerHTML = '';
}
else {
document.getElementById('del').innerHTML = '<a href="javascript:del_ref('+ref+')">-</a>';
}
}
//
function del_ref(i) {
var ref = parseFloat(i);
document.getElementById('child'+ref).innerHTML = '';
document.getElementById('child'+ref).style.display = 'none';
document.getElementById('ajout').innerHTML = '<a href="javascript:add_ref('+(ref - 1)+')">+</a>';
if(ref <= 2) {
document.getElementById('del').innerHTML = '';
}
else {
document.getElementById('del').innerHTML = '<a href="javascript:del_ref('+(ref - 1)+')">-</a>';
}
} |
et le début du tableau (avec la première ligne vide qui sera supprimée) :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <table height="35%" width="95%" border="1"STYLE="border-collapse: collapse; border: 1px solid black;">
<caption align="bottom">En votre aimable règlement à réception de facture</caption>
<tr height="10%" bgcolor= "black">
<td width="11%"> <font color="white">Code</font></td>
<td width="54%"> <font color="white">Désignation</font></td>
<td width="10%"> <font color="white">Prix HT<br /> Unitaire</font></td>
<td width="10%"> <font color="white">Qté</font></td>
<td width="12%"> <font color="white">Total HT</font></td>
</tr>
<tr valign=top>
<td><INPUT type=text name="codeL" value="" size="17%"></td>
<td><INPUT type=text name="desiL" value="" size="100%"></td>
<td><INPUT type=text name="prixhtuL" value="" size="12%"></td>
<td><INPUT type=text name="QteL" value="" size="13%"></td>
<td><INPUT type=text name="THTL" value="" size="15%"></td>
</tr>
</table> |
encore une fois je suis sur que c'est un petit détail mais je n'arrive pas à le trouvé :?
merci d'avance pour le temps que vous passerez sur mon problème:)
ps : excusez moi si je me suis trompé d'endroit pour ce sujet.
