11548 sujets

JavaScript, DOM et API Web HTML5

Principe de javascript => besoin d'une explication

bonjour,

J'aimerai savoir comment agir sur du code généré en javascript. Je m'explique:
Si je génère un tableau entre ces balises 
<div> </div>
, j'obtiens ca par exemple

<div>
<table>
<tr id="TR"> ...</tr>
</table>
</div>


Si j'affiche le code source de la page le tableau n'apparait pas entre les balises "div", alors comment travailler et récupérer la valeur à l'attribut "TR"? C'est possible au moins?
Bonjour.

Ton problème n'est pas très clair. Ce serait bien si tu pouvais nous donner un bout de code ou encore mieux une page en ligne.
Bonjour,

a écrit :
J'aimerai savoir comment agir sur du code généré en javascript.


Si il s'agit d'agir en terme de présentation : rien à faire en particulier (le navigateur se charge de la chose selon les feuilles CSS appellées). Smiley smile
Si il s'agit d'agir en terme de comportement : passer par la manipulation du DOM Javascript. Smiley cligne

a écrit :
Si j'affiche le code source de la page le tableau n'apparait pas entre les balises "div", alors comment travailler et récupérer la valeur à l'attribut "TR"? C'est possible au moins?


Normal Smiley ravi ! Une manipulation du DOM ne modifie pas le code HTML initial en tant que tel mais sa représentation au sein du navigateur.
Ainsi le nouvel arbre est mémorisé par le navigateur et reste tout à fait modifiable par le DOM. Smiley cligne

PS : la fameuse extension Firebug sous Firefox devrait t'éclairer un peu plus sur cette chose mystique qu'est le DOM. Smiley smile
a écrit :
Ainsi le nouvel arbre est mémorisé par le navigateur et reste tout à fait modifiable par le DOM

Ok mais j'arrive pas à faire apparaitre le 3ième tableau de l'exemple suivant. Et c'est ca qui me bloque.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>jQuery Starterkit</title>
<link rel="stylesheet" media="screen" type="text/css" title="css"/>
 <script src="jquery.js" type="text/javascript"></script>	   
 <script type="text/javascript">
 $(document).ready(function() 
{
	$("#explOne").click(function(){
		$("#affichTab2").append("<table border=black><tr><th>tableau2</th></tr><tr id='explTwo'><td>donnee2.0</td></tr><tr><td>donnee2.1</td></tr></table>");
	});
	
		$("#explTwo").click(function(){
		$("#affichTab3").append("<table border=black><tr><th>tableau3</th></tr><tr  id='expl2'><td>donnee3.0</td></tr><tr><td>donnee3.1</td></tr></table>");
	});
	
});
</script> 
</head>
<body>
<div>
<table id="tab1" border=black>
	<tr>
		<th>tableau1</th>		
	</tr>
	<tr id="explOne">
		<td>donnee1.0</td>	
	</tr>
	<tr>
		<td>donne1.1</td>		
	</tr>	
</table>
</div>
<div id="affichTab2"> </div>
<div id="affichTab3"> </div>
</body>
</html>


explication:
je clique sur la ligne du premier tableau ayant l'id "explOne" et cela m'affiche un 2ième tableau. Mais lorsque je clique sur ce 2ième tableau à la ligne ayant l'id "explTwo" rien ne se passe.
En fait j'arrive pas à récupérer avec le DOM les valeurs du code généré en javascript.

edit: oui j'utilise firebug, c'est bien pratique! Ca m'a permis de voir pas mal d'erreur en effet.

edit2: J'ai oublié de le préciser mais j'utilise la bibliothèque jQuery.

edit3:
Donc le code source est bien celui ci et pas moyen de travailler sur le code ajouté en rouge.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>jQuery Starterkit</title>
<link rel="stylesheet" media="screen" type="text/css" title="css"/>
 <script src="jquery.js" type="text/javascript"></script>	   
 <script type="text/javascript">
 $(document).ready(function() 
{
	$("#explOne").click(function(){
		$("#affichTab2").append("<table border=black><tr><th>tableau2</th></tr><tr id='explTwo'><td>donnee2.0</td></tr><tr><td>donnee2.1</td></tr></table>");
	});
	
		$("#explTwo").click(function(){
		$("#affichTab3").append("<table border=black><tr><th>tableau3</th></tr><tr  id='expl2'><td>donnee3.0</td></tr><tr><td>donnee3.1</td></tr></table>");
	});
	
});
</script> 
</head>
<body>
<div>
<table id="tab1" border=black>

	<tr>
		<th>tableau1</th>		
	</tr>
	<tr id="explOne">
		<td>donnee1.0</td>	
	</tr>
	<tr>
		<td>donne1.1</td>		
	</tr>	

</table>
</div>
<div id="affichTab2"> 
[#red]<table border=black>
 <tr>
  <th>tableau2</th>
 </tr>
 <tr id='explTwo'>
  <td>donnee2.0</td>
 </tr>
 <tr>
  <td>donnee2.1</td>
 </tr>
</table>[/#]
</div>
<div id="affichTab3"> </div>
</body>
</html>

Modifié par noobC (14 Aug 2008 - 12:43)
Pour faire apparaître le code HTML réel, tu peux essayer :
alert(document.getElementsByTagName('body')[0].innerHTML);

Attention toutefois, IE le reformate à sa sauce (p.ex. noms de balises en majuscules)
Essaye de travailler d'abord sous Firefox avant de travailler sous IE
de plus avec firebug et en utilisant des console.log et l'inspecteur dom, tu gagneras du temps.

Autre chose, tu peux aussi utiliser la Internet Developpeur Toolbar, qui te fera aussi gagner du temps considérable
oui j'utilise surtout la console de firebug, je sais pas vraiment utiliser les info de l'onglet DOM.
En tout cas je suis toujours pas parvenu à interagir avec le tableau généré en javascript (produire un évènement à partir de celui ci par exemple).
c'est exemple là est peut etre plus parlant?

<script src="jquery.js" type="text/javascript"></script>	   
 <script type="text/javascript">
 $(document).ready(function() 
{
	$("#explOne").click(function(){
		$("#affichTab2").append("<table border=black><tr><th>tableau2</th></tr><tr id='explTwo'><td>donnee2.0</td></tr><tr><td>donnee2.1</td></tr></table>");
	});	
	
	$("#explTwo").click(function(){
		$("#affichTab3").append("<table border=black><tr><th>tableau3</th></tr><tr  id='expl2'><td>donnee3.0</td></tr><tr><td>donnee3.1</td></tr></table>");
	});
	
	$("tr").not(":first").hover(function(){
		$(this).css("background-color", "red");
	},
	function()
	{
		$(this).css("background-color", "white");
	});
	
});
</script> 
</head>
<body>
<div>
<table id="tab1" border=black>
	<tr>
		<th>tableau1</th>		
	</tr>
	<tr id="explOne">
		<td>donnee1.0</td>	
	</tr>
	<tr>
		<td>donne1.1</td>		
	</tr>	
</table>
</div>
<div id="affichTab2"> </div>
<div id="affichTab3"> </div>
</body>


le passage de la souris provoque un background rouge sur le premier tableau mais pas sur le deuxième. On peut donc pas cumuler les évènements en javascript?
Modifié par noobC (18 Aug 2008 - 14:15)
Hello,

L'extension webdevelopper de Firefox possède une option pour afficher le code source généré par Javascript, ça peut être utile aussi.

Pour ajouter des tableaux en javascript, il y a quelques subtilités à savoir au niveau des <thead>, <tbody> que certains navigateurs ajoutent automatiquement, et que d'autres ont nécessairement besoin que tu leur rajoute à la main.
ok merci pour l'info. J'ai donc utilisé l'option "view generated source" et firefox ajoute une balise <tbody> de cette manière, pour l'affichage javascript du 2ième tableau:

<div id="affichTab2"> 
   <table border="1">
      [#red]<tbody>[/#]
            <tr><th>tableau2</th></tr>
            <tr id="explTwo"><td>donnee2.0</td></tr>
            <tr><td>donnee2.1</td></tr>
     [#red]</tbody>[/#]
   </table>
</div>


Mais ca explique pas pourquoi le code jQuery suivant 
$("tr").not(":first").hover(function(){
		$(this).css("background-color", "red");
	},function()	{
		$(this).css("background-color", "white");
	});

ne marche pas sur le deuxième tableau généré.
lut

je remonte le sujet parceque je n'arrive toujours pas à résoudre ce problème.
J'arrive vraiment pas à récupérer les valeurs du tableau se trouvant entre les balises
<div id="affichTab2"> </div>

Franchement je vois pas comment faire. J'ai essayé en insérant ce deuxième tableau au moyen d'un include en php, mais ca donne rien.

Si quelqu'un à moyen de tester le code il verra de quoi il est question exactement. Si je m'explique pas bien ca sera plus simple.
je peux faire ca mais est ce que c'est faisable dans la journée? ya pas des sites qui permettraient d'heberger provisoirement pour des tests quelconques?
Sujet clos
Aller à