Alternative à getElementById()

**Death83** · 04/07/2006, 02h31

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 :

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

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.'">&nbsp;'.$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

**Mobius** · 04/07/2006, 08h10

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

**SpaceFrog** · 04/07/2006, 09h04

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

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

**Death83** · 04/07/2006, 11h41

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 :

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

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.

**SpaceFrog** · 04/07/2006, 11h56

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

**Death83** · 04/07/2006, 12h19

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

**FremyCompany** · 04/07/2006, 12h30

En gros :

Code :

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

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.

**Death83** · 04/07/2006, 12h33

Le

Code :

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

TBody=document.getElementById("TBody_0")

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

**FremyCompany** · 04/07/2006, 12h38

ex concret :

Code :

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

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>

**Death83** · 11/07/2006, 20h04

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?

**Death83** · 11/07/2006, 20h24

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?

**Death83** · 11/07/2006, 21h32

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

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
 
<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?

**SpaceFrog** · 12/07/2006, 08h15

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

**Death83** · 12/07/2006, 14h14

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 :

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

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;
}