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

**Alzelus** · 22/05/2007, 21h30

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**E.Bzz** · 23/05/2007, 09h11

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+

**eyolas** · 23/05/2007, 10h54

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

**Ouach** · 23/05/2007, 11h47

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Auteur** · 23/05/2007, 12h41

bonjour,

essaye de créer les cellules de ton tableau avec insertRow() et insertCell().

**SpaceFrog** · 23/05/2007, 13h26

appende tout simplement dans le tbody ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

un grand classique ...

**Alzelus** · 23/05/2007, 17h01

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**E.Bzz** · 23/05/2007, 17h05

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) ...

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

JavaScript

Discussions similaires

Partager

Partager