[DOM] Ajout dynamique d'une ligne dans un <table>

Version imprimable

Bonjours tout le monde j'ai un petit bug avec un script que j'essair de monter.
tout fonctionne bien dans Firefox mais ca ne fonctionne pas dans explorer.

Avev vous une idée pourquoi ?? voici mon 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
<html>
<body>
 
<script>
 
var NBTABLE = 0;
 
var newpart = function(id) {
	var tr = document.createElement('tr');
 
	var newTD1=document.createElement('td');
	var newTD2=document.createElement('td');
	var newTD3=document.createElement('td');
	var newTD4=document.createElement('td');
 
	newTD1.innerHTML = "<input type=\"text\" name=\"textfield1\">";
	newTD2.innerHTML="<input type=\"checkbox\" name=\"if necessary\" value=\"checkbox\">";
	newTD3.innerHTML="<input type=\"text\" name=\"partdescript\">";
	newTD4.innerHTML="<input type=\"text\" name=\"price\">";
 
	tr.appendChild(newTD1);
	tr.appendChild(newTD2);
	tr.appendChild(newTD3);
	tr.appendChild(newTD4);
 
	document.getElementById("table_"+id).appendChild(tr);
 
}
 
var newItem = function(id){
	NBTABLE++;
	var newTR2= document.createElement('tr');
	newTR2.innerHTML="<td><table width=\"100%\" id=\"table_"+NBTABLE+"\" align=\"center\" border=\"1\"><tbody></tbody></table></td>";
	document.getElementById("main").appendChild(newTR2);
 
	var newTR= document.createElement('tr');
	var newTD = document.createElement('td');
	newTD.style.width='100px';
	var newTD2 = document.createElement('td');
 
	var input = document.createElement('input');
	input.type = 'button';
	input.value = 'New part';
	input.indice = NBTABLE;
	input.onclick = function(){
		newpart(this.indice);
	}
 
	newTD.appendChild(input);
	newTD2.innerHTML=id;
	newTR.appendChild(newTD);
	newTR.appendChild(newTD2);
	document.getElementById("table_"+NBTABLE).appendChild(newTR);
}
</script>
<form name="f">
<table  id="main" width="500px">
<input type="text" name="machineid"> <input type="button" onclick="newItem(document.forms.f.machineid.value)" value="Add machine">
</table>
</form>
<p>&nbsp;</p>
</body>
</html>

23/05/2007, 09h11
E.Bzz

Bonjour,
qq trucs qui peuvent géner (sans garantie de résultat) :
* id comme identifiant de variable est mal choisi (mot réservé)
* pas d'espaces dans les name ("if necessary")
* Mets tout ton JS dans la partie <head>. Si tu as un traitement à lancer au chargement de la page, fais en une fonction que tu appelles sur onload du <body>

Un dernier (qui doit pas géner JS, mais bon ...) : un <table> </table> avec 2 input directement dedans, pas terrible. Mets les plutôt dans un <span> ou un <div>.

A+
23/05/2007, 10h54
eyolas

IE et FF n'interprete pas de la meme facon le DOM.
Les appendChild sont different pour les deux

J'ai essayé de nombreuses hypothèses, je n'ai pas trouvé de solution.
J'ai réussi à reproduire le problème avec moins de code. En espérant que cela pourra aider à la compréhention.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
    <head>
    <script language="javascript">
    <!--
      function newItem()
      {
        var newTR2= document.createElement('tr');
        newTR2.innerHTML = "<td>aa</td>";
        document.getElementById("main1").appendChild(newTR2);
      }
    //-->
    </script>
  </head>
  <body>
    <form name="f">
      <table id="main1" width="500px">
        <input type="button" onclick="newItem()" value="Add machine">
      </table>
    </form>
  </body>
</html>

23/05/2007, 12h41
Auteur

bonjour,

essaye de créer les cellules de ton tableau avec insertRow() et insertCell().
23/05/2007, 13h26
SpaceFrog

:roll:
appende tout simplement dans le tbody ...

Code:

document.getElementById("table_"+id).getElementsByTagName('tbody')[0].appendChild(tr);

un grand classique ...

ok pour loader les field mais

Au debut je suis parti avec le code ci dessous mais lorsque j'essaie de donner un id différent a chaques newmachine je ne peux pas faire un new part sur un id différent
document.getElementById("a").getElementsByTagName('tbody')[0].appendChild(newTR2);

Je ne peux pas changer le "a" pour un nom de tableaudifférent.

Ce qui fait que lorsque j'ai un new part ca ajoute a la fin completement a la place d'ajouter en dessous du new part de la machine.

P.S. Je suis newbee en javascript

################################################

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
<html>
<body>
<script>
function newpart () {
 
newTR2=document.createElement('tr');
newTR2.id="2";
newTD1=document.createElement('td');
newTD2=document.createElement('td');
newTD3=document.createElement('td');
newTD4=document.createElement('td');
newTD1.innerHTML="<input type=\"text\" name=\"textfield1\">";
newTD2.innerHTML="<input type=\"checkbox\" name=\"if necessary\" value=\"checkbox\">";
newTD3.innerHTML="<input type=\"text\" name=\"partdescript\">";
newTD4.innerHTML="<input type=\"text\" name=\"price\">";
newTR2.appendChild(newTD1);
newTR2.appendChild(newTD2);
newTR2.appendChild(newTD3);
newTR2.appendChild(newTD4);
//alert(document.getElementsByTagName("tbody")[0].parentNode.tagName);
document.getElementById("a").getElementsByTagName('tbody')[0].appendChild(newTR2);
}
 
function newItem (id) {
newTR=document.createElement('tr');
newTR2=document.createElement('tr');
newTR2.innerHTML="<td><table id=\"b\" align=\"center\" border=\"1\"></table></td>";
newTD=document.createElement('td');
newTD2=document.createElement('td');
//alert(document.getElementsByTagName("tbody")[0].parentNode.tagName);
newTD.innerHTML="<input type=\"button\" onclick=\"newpart()\" value=\"New part\">";
newTD2.innerHTML=id;
newTR.appendChild(newTD);
newTR.appendChild(newTD2);
document.getElementById("a").getElementsByTagName('tbody')[0].appendChild(newTR);
}
</script>
 
<table id="a" align="center" border="1">
 
<form name="f">
<tr>
<td><input type="text" name="machineid"> <input type="button" onclick="newItem(document.forms.f.machineid.value)" value="Add machine"></td>
</tr>
</form>
</table>
<p>&nbsp;</p>
</body>
</html>

23/05/2007, 17h05
E.Bzz

Citation:

Envoyé par E.Bzz

* id comme identifiant de variable est mal choisi (mot réservé)
* pas d'espaces dans les name ("if necessary")
* Mets tout ton JS dans la partie <head>. Si tu as un traitement à lancer au chargement de la page, fais en une fonction que tu appelles sur onload du <body>

Un dernier (qui doit pas géner JS, mais bon ...) : un <table> </table> avec 2 input directement dedans, pas terrible. Mets les plutôt dans un <span> ou un <div>.

Tant que tu laisses ça comme ça, le fonctionnement sera aléatoire (dans le meilleur des cas) ...