11550 sujets

JavaScript, DOM et API Web HTML5

Bonjour je cherche à créer un tableau dans ma page html quand je clique sur un bouton.

Ce tableau est le suivant.

J'ai essayé document.write

Mais ca ne marche pas. Pourriez vous m'aider?


<span id="scrollspan" MCScrollable="true" style="position: absolute; top: 130; left: 371px; width: 795px; height: 483; overflow: hidden">
    <table id="tablechaine" border="0" cellpadding="0" cellspacing="0">
       <tr>
		<td hidefocus="true" class="photoTD" MCFocusable="true"><span title="tf1" id="un" class="chaineD" MCFocusable="true"></span></td>
		<td id="null" class="vide" ></td>
		<td hidefocus="true" class="photoTD" MCFocusable="true"><span title="france" id="2" class="chaine" MCFocusable="true"></span></td>
		<td id="null" class="vide" ></td>
		<td hidefocus="true" class="photoTD" MCFocusable="true"><span title="france3" id="3" class="chaine" MCFocusable="true">Media Title 1</span></td>
		<td id="null" class="vide" ></td>
		<td hidefocus="true" class="photoTD" MCFocusable="true"><span style="background-image:url(Images/Chaines/mosaique.jpg)" title="canal plus" id="quatre" class="chaine" MCFocusable="true">Media Title 1</span></td>
		</tr>
 </table>
</span>

Modifié par dalton5 (25 Apr 2007 - 23:13)
document.write ne fonctionne plus après que l'arbre DOM de la page est construit.
IL faut utiliser une autre technique, d'autant plus que celle-ci n'est pas recommandée pour des raisons d'accessibilité sans javascript.
Bonjour,

a écrit :
Mais alors comment je peux faire pour créer mon tableau par une fonction javascript?


En se renseignant sur les méthodes du DOM (Document Object Model) : document.createElement(...), document.createTextNode(...) et .appendChild(...) (entre autres).

Bonne continuation.
Romain

PS : Google est ton ami Smiley cligne . Rechercher DOM ou l'une des méthodes citées ci-dessus ...
Le plus simple serait de mettre ce texte directement dans le .innerHTML de l'élément où tu veux faire apparaitre ton tableau.

Imagine que tu a un

<div id="monDiv"></div>


et en javascript


var tableau = '<span id="scrollspan" MCScrollable="true" style="position: absolute; top: 130; left: 371px; width: 795px; height: 483; overflow: hidden">

    <table id="tablechaine" border="0" cellpadding="0" cellspacing="0">

       <tr>

		<td hidefocus="true" class="photoTD" MCFocusable="true"><span title="tf1" id="un" class="chaineD" MCFocusable="true"></span></td>

		<td id="null" class="vide" ></td>

		<td hidefocus="true" class="photoTD" MCFocusable="true"><span title="france" id="2" class="chaine" MCFocusable="true"></span></td>

		<td id="null" class="vide" ></td>

		<td hidefocus="true" class="photoTD" MCFocusable="true"><span title="france3" id="3" class="chaine" MCFocusable="true">Media Title 1</span></td>

		<td id="null" class="vide" ></td>

		<td hidefocus="true" class="photoTD" MCFocusable="true"><span style="background-image:url(Images/Chaines/mosaique.jpg)" title="canal plus" id="quatre" class="chaine" MCFocusable="true">Media Title 1</span></td>

		</tr>

 </table>

</span>'

document.getElementById("monDiv").innerHTML = tableau;


le mieux serait sans doute de construire ton tableau à coup de document.createElement mais, le innerHTML va plus vite à écrire.


Au passage, c'est quoi MCScrollable et MCFocusable ?
Tymlis a écrit :

Au passage, c'est quoi MCScrollable et MCFocusable ?


Je développe un module pour media center. Ce sont des fonctions javascript propre à Media center.

Merci à tous je vais essayer
dalton5 a écrit :


Je développe un module pour media center. Ce sont des fonctions javascript propre à Media center.

Merci à tous je vais essayer

Tu me rassures mais tu es sur que tu as le droit d'avoir un table dans un span Smiley biggol ?
Modifié par Gatsu35 (23 Apr 2007 - 20:45)
a écrit :

Tu me rassures mais tu es sur que tu as le droit d'avoir un table dans un span

Ah ça, c'est totalement invalide.
Span est type inline, table est type bloc, on ne peut pas mettre des balises de type bloc dans du inline.
Solution rapide (mais pas forcément la meilleure) : remplacer span par div
Solution plus réfléchie : repenser tout ton truc : utilisation de tableau justifiée ? utilisation de js justifiée ? etc.