Remplir un tableau en javascript

Version imprimable

Salam,
Je souhaite replir un tableau avec javascript ,les données dont on se sert pour rmplir sont Obtenu à partir d'un formulaire .
Pour cela j'ai crée une fonction qui s'execute suite à une click sur un boutton ,voila ma fonction :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 var html=document.getElementById('TabAddRouleau').innerHTML; var tab=html.split("</TBODY>"); html=tab[0]; html=html+"\n<TR>"; html=html+"\n<TD>"+document.form2.rouleau.value+"</TD>"; html=html+"\n<TD>"+document.form2.mr.value+"</TD>"; html=html+"\n<TD>"+document.form2.chuteT.value+"</TD>"; html=html+"\n<TD>"+document.form2.defaut.value+"</TD>"; html=html+"\n</TR>\n"; html=html+"</TBODY>"; alert (html); document.getElementById('TabAddRouleau').innerHTML=html;
Avec firefox cela marhe bien mais avec IE5 il me donne l'erreur suivate :

Code:

une erreur d'éxecution inconnue !

26/08/2006, 19h24
javatwister

eh bien en fait, après 3 lectures, je n'ai toujours pas compris ce que tu voulais faire;
26/08/2006, 19h29
javatwister

ah si d'accord...

et ton tableau est-il complètement vide avant que tu tentes de le remplir?

ou alors tu cherches à créer une nouvelle ligne?
26/08/2006, 20h14
FremyCompany
1/ Ca marche pas si il n'y a pas de tbody (il se peut que le navigateur l'enlève juste pour optimiser le code
2/ si la balise est écrite en minuscule (comme dans les conventions XHTML), ca ne marche pas non plus..

Cela me semble la meilleure solution (changer le innerHTML peut avoir des effets dévastateur sur les scripts ayant une variable pointant sur un objet HTML... en effet, le changement de innerHTML écrase tous les anciens objets et en crée de nouveau) :
Code:

1 2 3 var tr=document.createElement("tr"); tr.innerHTML=html; table.tBodies[0].appendChild(tr)

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
<table id="TabAddRouleau">
	<tr>
		<th>un</th>
		<th>deux</th>
		<th>trois</th>
		<th>quatre</th>
	</tr>
</table>
 
 
<form id="f" action="">
 
<p>
<input type="text" name="rouleau" />
<input type="text" name="mr" />
<input type="text" name="chuteT" />
<input type="text" name="defaut" />
</p>
 
<p>
<input type="button" onclick="addr(this.form.elements)" value="ajouter la ligne" />
</p>
 
</form>
 
 
<script type="text/javascript">
 
var t=document.getElementById("TabAddRouleau").tBodies[0];
var tr, td;
 
function addr(f){
 
	tr=document.createElement("tr");
	for(i=0;i<4;i++){
		td=document.createElement("td");
		td.appendChild(document.createTextNode(f[i].value));
		tr.appendChild(td);
	}
 
	t.appendChild(tr)
 
}
 
</script>

Salam,
J'ai fait un astuce :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
var html=document.getElementById('DivTabAddRouleau').innerHTML;
	var tab=html.split("</TBODY>");
	html=tab[0];
	html=html+"\n<TR>";
	html=html+"\n<TD>"+document.form2.rouleau.value+"</TD>";
	html=html+"\n<TD>"+document.form2.mr.value+"</TD>";
	html=html+"\n<TD>"+document.form2.chuteT.value+"</TD>";
	html=html+"\n<TD>"+document.form2.defaut.value+"</TD>";
	html=html+"\n</TR>\n";
	html=html+"</TBODY></table>";
	alert (html);
document.getElementById('DivTabAddRouleau').innerHTML=html;

Est cela marche bien !
Merci à vous tous
Et specialement à Toi FremyCompany ! ;)