Alternative à getElementById()

Version imprimable

Salut a tous,

j'ai un petit soucis avec AJAX et internet explorer. En fait, j'ai une page qui va générer un tableau dynamiquement en AJAX et un sous tableau est appelé et affiché grace à des id. Ces id sont donc généré au fur et a mesure, ce qui ne plait apparament pas a internet explorer (ca marche sous FF) qui ne prend en compte que les id générés au chargement de la page.

Comment puisje faire. On ma conseiller d'utiliser appendchild() mais j'ai pas très bien compris comment ca marche. Pouvez vous m'aider, ou proposer une autre alternative

ps: Mon code est simple. J'ai un moteur de recherche qui renvoie les résulatats automatiquement dans un <div id=test></div>. Ce tableaux fait appale a des sous-tableaux qui sont affiché grace aux id des tableaux deja généré:
Code:

1 2 3 4 5 echo'<tr id=a'.$id[$i].' class="'.$class.'" ><td onMouseOver="this.className=\'tableserieon\';" onMouseOut="this.className=\''.$class.'\';" onClick="liens(\''.$lienserie.'\');"><a href="'.$lienserie.'"> '.$Titre[$i].'</a></td><td onMouseOver="this.className=\'tableserieon\';" onMouseOut="this.className=\''.$class.'\';" onClick="if(document.getElementById(\'afftome'.$id[$i].'\').innerHTML==\'\'){go(\''.$Titre[$i].'\',\'afftome'.$id[$i].'\',\'rien\',\'../AJAX/accueilmanga2.php?titre=\');} else{document.getElementById(\'afftome'.$id[$i].'\').innerHTML=\'\';}"><img src="../imagesite/'.$habillage.'/loupe2.gif" alt="loupe"> ('.$nbtomes[$i].')</td></tr>'; echo '<tr id="afftome'.$id[$i].'"></tr>';
J'ai mis le code en php. La premiere ligne contient la fonction (go) qui permet de récupérer des donnée par ajax et de les mette dans l'id correspondant à la 2ème ligne.

Voilà, si vous avez des questions hésitez pas!

Merci d'avance

04/07/2006, 08h10
Mobius

une solution serait de gerer toi meme, l'association entre les id et tes div dans un tableau... Merci IE :lol:

Oui une solution est de passer par le DOM pour créer de nouveaux éléments sur la page ...

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
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Tableau DOM</title>
 
<script type='text/javascript'>
var nbligne=3;
var nbcol=3;
var Tableau;
var THeader;
var TBody;
var Ligne;
var Cellule;
 
function nouveauTableau(){return document.createElement('table');}
function nouveauHeader(){return document.createElement('theader');}
function nouveauBody(){return document.createElement('tbody');}
function nouvelleLigne(){return document.createElement('tr');}
function nouvelleCellule(){return document.createElement('td');}
 
function Build(){
 
Tableau=nouveauTableau();
Entete=nouveauHeader();
Corps= nouveauBody()
 
for(i=0;i<nbligne;i++){
			Ligne=nouvelleLigne();
			Ligne.id='ligne'+i;
 
			for (j=0;j<nbcol;j++){
						Cellule=nouvelleCellule();
						Cellule.id='Cell'+i+'_'+j;	
						Cellule.style.border='solid 1px blue';
						Cellule.innerHTML='Cell'+i+'_'+j;	
						Cellule.onclick=function(){alert('l\'id de cette cellule est: '+this.id)}
						Ligne.appendChild(Cellule);
						}
 
			Corps.appendChild(Ligne);
			Tableau.appendChild(Corps)
 
			}
 
document.body.appendChild(Tableau)
}
</script>
</head>
<body onload='Build()'>
</body>
</html>

A noter que IE n'autorise l'append dasn le tableau que dans le theader ou le tbody, d'ou la necessité de l'ajouter dasn le code ...

firefox extrapole (pour une fois )

Merci ca me parait etre une methode intéressante.

La je pense juste généré un <tr> avec cette methode est-ce possible.

VOila le tableau que j'ai :
Code:

1 2 3 4 5 6 7 8 9 <table> <tr> <td Onclick="cliquer ici va entrainer une requette AJAX et va renvoy"er les résulats dans le tr suiva,t"> <td> <tr> <tr id="">Ligne qu'il faut créer pour afficher les résultat dedans </tr> </table>
ps: La page aja génére un tableau qu'il faut insérer dans le tr.

J'ai essayé de bidouiller un truc, mais le problème est que je ne vois pas comment faire pour créer un <tr> après celui ou ce plasse l'evenement.

04/07/2006, 11h56
SpaceFrog

Ben oui je t'ai juste donné le tout à titre didactique ...

pour ajouter juste un tr prend uniquement la partie createElement('tr')

et append ensuite là ou tu veux ...
04/07/2006, 12h19
Death83

append ca fait quoi?

La j'ai fait une create tr avec un innerhtml pour mettre du contenu dedans mais rien ne se passe (pas d'erreur et rien qui s'affiche).

En gros :
Code:

1 2 3 4 TBody=document.getElementById("TBody_0") var Tr=document.createElement("TR") Tr.innerHTML = HTML TBody.appendChild(Tr)
appendChild ajoute l'élement dans le noed.

04/07/2006, 12h33
Death83

Le

Code:

TBody=document.getElementById("TBody_0")

Il correspond à l'id du tableau? du tr avant?

ex concret :

Code:

1
2
3
4
5
6
7
8
<table>
   <tbody id="TBody_0">
      <tr>
         <td>X</td>
      </tr>
      <!-- Emplacement de la prochaine ligne -->
   </tbody>
</table>

11/07/2006, 20h04
Death83

Désolé de ressortir ce post mais j'était partis en vacances sans avoir pu résoudre mon problème.

Je viens d'essayer cette methode ca marche, mais en fait ca efface le tr du dessus.

Est-ce normal?
11/07/2006, 20h24
Death83

En fait ca marche avec ton exemple mais que sous FF sous internet explorer il rajoute un petit espace a chaque click mais il ne met pas le contenu avec le innerhtml.

Bizarre non?

SI vous voulez voir c'est simple essayé ce code sous FF et sous IE:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<script type='text/javascript'>
function test()
{
	TBody=document.getElementById("TBody_0")
	var Tr=document.createElement("TR")
	Tr.innerHTML = 'test';
	TBody.appendChild(Tr)
}
</script>
<table style="border: 1px blue solid;">
   <tbody id="TBody_0">
      <tr>
         <td onclick="test();">Cliquez ici!</td>
      </tr>
      <!-- Emplacement de la prochaine ligne -->
   </tbody>
</table>

Pourquoi ca ne marche pas avec IE?

12/07/2006, 08h15
SpaceFrog

heu ben ils sont ou les td ????

il faut faire des create de td et un create de tr,

faire un append des td dasn le tr puis du tr dasn le tbody ...
regarde l'exemple que je t'ai donné ...

Merci, en effet ca marche mieu.

Il me reste qu'un seul probleme.

J'ai essayer d'attribuer un colspan a cet id dernierment crée mais ca ne marche pas

mon code:
Code:

1 2 3 4 5 6 7 8 9 10 11 function test(idbody,idtr) { TBody=document.getElementById(idbody); var Tr=document.createElement("tr"); var Td=document.createElement("td"); TBody.appendChild(Tr); Tr.appendChild(Td); Td.id='aff'+idtr; Td.colspan=2; }

12/07/2006, 15h17
SpaceFrog

Code:

Td.style.colspan=2

sinon

Code:

Td.setAttribute('colspan','2')