removeChild supprimer un seul objet
slt à tous ,
j'ai un probleme avec mon code
je vous explique
j'ai un code qui creer des elements dans un tableau avec appendChild
et je veux aussi mettre un lien pour supprimer l'element créer avecremoveChild
mais la fonction moins() me supprime tout les elements creer :(
j'ai pas compris pourquoi alors je vous demande votre aide je suis un peu debutant avec js merci d'avance
voila le code
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
<html>
<head>
<script language="javascript" type="text/javascript">
var count = 1;
function one_more_ligne () {
count++;
if(count<=5)
{
var tr = document.createElement("TR");
var td_1 = document.createElement("TD");
var td_2 = document.createElement("TD");
var td_3 = document.createElement("TD");
var td_4 = document.createElement("TD");
var inp1 = document.createElement("INPUT");
var inp2 = document.createElement("INPUT");
var act1 = document.createElement("LABEL");
var act2 = document.createElement("LABEL");
act1.innerHTML = count;
act2.innerHTML = '<font style="font-size:16px" color="#000000" face="Arial"><a href="new 2.html" onclick="moins()>Supprimer</a></font>';
td_1.align="center";td_1.valign="top"; td_1.width="66"; td_1.height="38";
td_2.align="center";td_2.valign="top"; td_2.width="66"; td_2.height="38";
td_3.align="center";td_1.valign="top"; td_3.width="66"; td_3.height="38";
td_4.align="center";td_4.valign="top"; td_4.width="66"; td_4.height="38";
inp1.name="design"+count;inp1.type="text";inp1.id="design"+count;
inp2.name="qte"+count;inp2.type="text";inp2.id="qte"+count;
td_1.appendChild(act1);
td_2.appendChild(inp1);
td_3.appendChild(inp2);
td_4.appendChild(act2);
tr.appendChild(td_1);
tr.appendChild(td_2);
tr.appendChild(td_3);
tr.appendChild(td_4);
byId("Table1").getElementsByTagName('tbody')[0].appendChild(tr);
}
}
function byId(elmId){
var elm = document.getElementById(elmId);
if(elm==null)
elm = document.getElementsByName(elmId)[0];
return elm;
}
function moins()
{
var elm = "Table1";
elm.getElementsByTagName('tbody')[0].removeChild(tr);
}
</script>
</head>
<body>
<table style="position:absolute;left:2%;top:15%" width="60%" cellpadding="0" cellspacing="0" border="1" id="Table1">
<tbody>
<tr>
<td align="center" valign="top" width="66" height="15" ><font style="font-size:16px" color="#000000" face="Arial"><b>N°</b></font></td>
<td align="center" valign="top" width="238" height="15"><font style="font-size:16px" color="#000000" face="Arial"><b>Désignation</b></font></td>
<td align="center" valign="top" width="110" height="15"><font style="font-size:16px" color="#000000" face="Arial"><b>Quantité</b></font></td>
<td align="center" valign="top" width="218" height="15"><font style="font-size:16px" color="#000000" face="Arial"><b>Action</b></font></td>
</tr>
<tr>
<td align="center" valign="middle" width="66" height="38"><font style="font-size:16px" color="#000000" face="Arial"><b>1</b></font></td>
<td align="center" valign="middle" width="238" height="38"><font style="font-size:16px" color="#000000" face="Arial"><input type="text" id="dest1" name="dest1" value=""></font></td>
<td align="center" valign="middle" width="110" height="38"><font style="font-size:16px" color="#000000" face="Arial"><input type="text" id="qte1" name="qte1" value=""></font></td>
<td align="center" valign="middle" width="218" height="38"><font style="font-size:16px" color="#000000" face="Arial"><a href="#" >Supprimer</a></font></td>
</tr>
</tbody>
</table><br><br>
<a href="#" onclick="one_more_ligne();">[+] Une de plus</a>
</body>
</html> |
je fais appel a one_more_ligne () pour ajouter une ligne (tr et des td)
et moins() pour supprimer la ligne
un screen
http://img144.imageshack.us/img144/3466/gifjdj.gif
