Ecrire dans un tableau en javascript

Ecrire dans un tableau en javascript - HTML/CSS - Programmation

Marsh Posté le 23-03-2005 à 22:29:03    

Bonjour,
 
Je voudrais grace à un javascript écrire dans un tableau de 2 colonnes et 3 lignes ... Quelqu'un saurait comment faire ...
 
Merci

Reply

Marsh Posté le 23-03-2005 à 22:29:03   

Reply

Marsh Posté le 23-03-2005 à 22:57:10    

Bonsoir,
 
Dans une page (X)HTML aux normes, on modifie des données de la page (tableau ou autre) à l'aide du javascript DOM.

Reply

Marsh Posté le 24-03-2005 à 13:37:00    

Autre possibilité : tu mets des ID à tes cellules (<td id="cell11">, <td id="cell12"> ) et tu fais :
 

Code :
  1. document.getElementById('cell11').innerHTML = "mon texte"

Reply

Marsh Posté le 24-03-2005 à 23:05:12    

cosmoschtroumpf a écrit :

Autre possibilité : tu mets des ID à tes cellules (<td id="cell11">, <td id="cell12"> ) et tu fais :
 

Code :
  1. document.getElementById('cell11').innerHTML = "mon texte"



 
Je viens d'essayer mais malheureusement ca ne marche pas ... aurais-tu un exemple plus détaillé.
 
Merci

Reply

Marsh Posté le 24-03-2005 à 23:37:22    

Code :
  1. <body onload="ploum()">
  2. <table border="1"><tr><td id="cellule"></td></tr></table>
  3. <script language="javascript">
  4. function ploum() {
  5.   document.getElementById("cellule" ).innerHTML = "et <b>hop</b>"
  6. }
  7. </script>
  8. </body>


 
taistaid and approuvaid, ça met bien "et hop" (avec "hop" en gras) dans la cellule du tableau.

Reply

Marsh Posté le 26-03-2005 à 22:39:52    

Salut,
 
J'ai essayé ton exemple dans une page html, et ca marche bien, j'ai ré-essayé de la meme facon avec une autre page web et rien ne se passe ... Le probleme est presque le meme sauf que j'utilise une entrée de type input qui est contenu dans un tableau de 5 lignes, 5 colonnes ...
 
Je te met le code html, en exemple, si tu peux m'aider ... rien ne se passe et je perd mon latin ... :??:  
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
</head>
 
<body onLoad="ploum()">
 
 <table width="100%" border="0" align="center" cellpadding="2">
 
  <!----------->
  <!-- Pays  -->
  <!----------->
  <tr align="center" valign="middle">
     
   <!------------->
   <!-- Estonie -->
   <!------------->
   <td width="20%">
    <b><i><u>Estonie</u></i></b>
   </td>
   
   <!-------------->
   <!-- Finlande -->
   <!-------------->
   <td width="20%">
    <b><i><u>Finlande</u></i></b>
   </td>
     
   <!------------>
   <!-- France -->
   <!------------>
   <td width="20%">
    <b><i><u>France</u></i></b>
   </td>
     
   <!----------->
   <!-- Suéde -->
   <!----------->
   <td width="20%">
    <b><i><u>Su&eacute;de</u></i></b>
   </td>
 
   <!-------------->
   <!-- Trinidad -->
   <!-------------->  
   <td width="20%">
   <b><i><u>Trinidad</u></i></b>
   </td>
  </tr>
 
  <!----------------->
  <!-- Photo Pays  -->
  <!----------------->
  <tr>
   
   <!------------->
   <!-- Estonie -->
   <!------------->
   <td width="20%">
    <div id="Photo_Est" align="center">
     <img src="Images/Voyages/Estonie.jpg" alt="Tallinn, le 20 Juin 2004" name="Image1" width="200" height="150" id="Image1">
    </div>
    </td>
 
   <!-------------->
   <!-- Finlande -->
   <!-------------->
   <td width="20%">
    <div id="Photo_Fin" align="center">
     <img src="Images/Voyages/Finlande.jpg" alt="Espoo, le 7 Mai 2004" name="Image2" width="200" height="150" id="Image2">
    </div>
    </td>
   
   <!------------>
   <!-- France -->
   <!------------>
   <td width="20%">
    <div id="Photo_Fra" align="center">
                  <img src="Images/Voyages/France.jpg" alt="Paris, le 19 Novembre 2004" name="Image3" width="200" height="150" id="Image3"> </div>
    </td>
   
   <!----------->
   <!-- Suéde -->
   <!----------->
      <td width="20%">
    <div id="Photo_Sue" align="center">
     <img src="Images/Voyages/Suede.jpg" alt="Stockholm, le 8 Août 2004" name="Image4" width="200" height="150" id="Image4">
    </div>
    </td>
   
   <!-------------->
   <!-- Trinidad -->
   <!-------------->
      <td width="20%">
    <div id="Photo_Tri" align="center">
     <img src="Images/Voyages/Trinidad.jpg" alt="Port of Spain, le 30 Novembre 2004" name="Image5" width="200" height="150" id="Image5">
    </div>
       </td>
  </tr>
 
   <!------------------>
  <!-- Légende Pays -->
  <!------------------>
  <tr>
   
   <!------------->
   <!-- Estonie -->
   <!------------->
      <td>
    <div align="center">
     <i>Coucher de soleil sur la baie de Tallinn</i>
    </div>
    </td>
   
   <!-------------->
   <!-- Finlande -->
   <!-------------->
   <td>
    <div align="center">
     <i>Coucher de soleil sur la baie d'Espoo</i>
    </div>
    </td>
   
   <!------------>
   <!-- France -->
   <!------------>
      <td>
    <div align="center">
     <i>Coucher de soleil sur la Seine travers&eacute;e par un bateau-mouche</i>
    </div>
    </td>
 
   <!----------->
   <!-- Suéde -->
   <!----------->
   <td>
    <div align="center">
     <i>La ville de Stochkolm, capitale su&eacute;doise (Thanks Paulina)</i>
    </div>
    </td>
   
   <!-------------->
   <!-- Trinidad -->
   <!-------------->
   <td>
    <div align="center">
     <i>Coucher de soleil au large de l'ile de Trinidad</i>
    </div>
    </td>
    </tr>
 
  <!--------------------->
  <!-- Heure,Date Pays -->
  <!--------------------->
  <tr>
   <!------------->
   <!-- Estonie -->
   <!------------->
   <td>
    <div id="Temps_Est" align="center">
     <i>A <b>Tallinn </b><i>(GMT+2)</i>,<br>
     nous sommes, le<br>
     <input name="EstDate" type="text" id="EstDate" size="20"><br>
     il est</i><br>
     <input name="EstTime" type="text" id="EstTime" size="20">
     <br>
    </div>
   </td>
   
   <!-------------->
   <!-- Finlande -->
   <!-------------->
   <td>
    <div id="Temps_Fin" align="center">
     <i>A <b>Helsinki </b><i>(GMT+2)</i></b>,<br>
     nous sommes, le<br>
       <input name="FinDate" type="text" id="FinDate" size="20"><br>
     il est</i><br>
     <input name="FinTime" type="text" id="FinTime" size="20"><br>
    </div>
   </td>
   
   <!------------>
   <!-- France -->
   <!------------>
   <td>
    <div id="Temps_Fra" align="center">      
     <i>A <b>Paris </b><i>(GMT+1)</i></b>,<br>
     nous sommes, le<br>
       <input name="FraDate" type="text" id="FraDate" size="20">
       <br>
     il est</i><br>
     <input name="FraTime" type="text" id="FraTime" size="20">
     <br>  
    </div>
   </td>
   
   <!----------->
   <!-- Suéde -->
   <!----------->
   <td>
    <div id="Temps_Sue" align="center">
     <i>A <b>Stockholm </b><i>(GMT+1)</i></b>,<br>
     nous sommes, le<br>
       <input name="SueDate" type="text" id="SueDate" size="20">
       <br>
     il est</i><br>
     <input name="SueTime" type="text" id="SueTime" size="20">
     <br>  
    </div>
   </td>
   
   <!-------------->
   <!-- Trinidad -->
   <!-------------->
   <td>
    <div id="Temps_Tri" align="center">
     <i>A <b>Port-of-Spain </b><i>(GMT-4)</i></b>,<br>
     nous sommes, le<br>
     <input name="TriDate" type="text" id="TriDate" size="20">
     <br>
     il est</i><br>
     <input name="TriTime" type="text" id="TriTime" size="20">
     <br>      
    </div>
   </td>
  </tr>
   
  <!---------------->
  <!-- Temp. Pays -->
  <!---------------->
    <tr>
   <!------------->
   <!-- Estonie -->
   <!------------->
      <td>
        <div align="center">
    <p><i>Temp&eacute;rature:</i><br>
        <input type="text" name="EstTemp" size="20">
        <br>                
     </p>
     </div>
   </td>
   
   <!-------------->
   <!-- Finlande -->
   <!-------------->
   <td>
        <div align="center">
    <i>Temp&eacute;rature:</i><br>
    <input type="text" name="FinTemp" size="20"><br>
   </div>
   </td>
   
   <!------------>
   <!-- France -->
   <!------------>
   <td>
        <div align="center">
    <i>Temp&eacute;rature:</i><br>
    <input type="text" name="FraTemp" size="20">
    <br>
   </div>
   </td>
   
   <!----------->
   <!-- Suéde -->
   <!----------->
   <td>
        <div align="center">
    <i>Temp&eacute;rature:</i><br>
    <input type="text" name="SueTemp" size="20">
    <br>
   </div>
   </td>
   
   <!-------------->
   <!-- Trinidad -->
   <!-------------->
   <td>
        <div align="center">
    <i>Temp&eacute;rature:</i><br>
    <input type="text" name="TriTemp" size="20">
    <br>  
   </div>
   </td>
   </tr>
 </table>
 
 <!----------------------->
 <!-- Appel d'un script -->
 <!----------------------->
 <script language="javascript">
 
 function ploum()
 {
    document.getElementById("EstTime" ).innerHTML = "et hop";
    document.getElementById("FinTime" ).innerHTML = "et hop";
    document.getElementById("FraTime" ).innerHTML = "et hop";
  document.getElementById("SueTime" ).innerHTML = "et hop";
  document.getElementById("TriTime" ).innerHTML = "et hop";
 }
 </script>
 
</body>
</html>
 

Reply

Marsh Posté le 28-03-2005 à 23:39:34    

si tu veux remplir un input, il ne faut pas mettre innerHTML. InnerHTML, ça vaut pour les balises de conteneurs : div, td, p, etc. Pour les input, il faut mettre getElementById("id" ).value.
 
D'ailleurs, pour les input t'es même pas obligé de passer par getElementById (même si c'est conseillé). Tu peux utiliser document.nom_du_form[optionnel].nom_de_l_input.value. Mais il est tout de même conseillé de passer par getElementById.

Reply

Marsh Posté le 29-03-2005 à 13:25:41    

cosmoschtroumpf a écrit :

si tu veux remplir un input, il ne faut pas mettre innerHTML. InnerHTML, ça vaut pour les balises de conteneurs : div, td, p, etc. Pour les input, il faut mettre getElementById("id" ).value.
 
D'ailleurs, pour les input t'es même pas obligé de passer par getElementById (même si c'est conseillé). Tu peux utiliser document.nom_du_form[optionnel].nom_de_l_input.value. Mais il est tout de même conseillé de passer par getElementById.


 
Salut
 
Je viens d'essayer avec document.getElementById("FinTime" ).value="et hop" ...
et rien ne se passe, je comprends pas ce qu'il manque  :sweat:  
 
Merci @+

Reply

Marsh Posté le 29-03-2005 à 14:04:22    

essaye avec document.nom_de_l_input.value

Reply

Marsh Posté le 29-03-2005 à 14:23:42    

cosmoschtroumpf a écrit :

essaye avec document.nom_de_l_input.value


Non :o Faut surtout pas :o Ca c'est du JS qui date de NS4.7
 
Il faut utiliser getElementById pour les input. Ca ne pose pas de problème, vu qu'un input doit avoir un id pour l'associer avec un label ;)

Reply

Marsh Posté le 29-03-2005 à 14:23:42   

Reply

Marsh Posté le 29-03-2005 à 20:42:07    

En fait c'était surtout pour voir si c'était au niveau du getelementbyid qui marchait pas ou si c'était ailleurs :o

Reply

Marsh Posté le 29-03-2005 à 22:22:33    

cosmoschtroumpf a écrit :

En fait c'était surtout pour voir si c'était au niveau du getelementbyid qui marchait pas ou si c'était ailleurs :o


 
Resalut,  
 
J'ai collé le script dans un fichier script "heure.js" et donc avec une page html classique ca marche nickel ... par contre, j'ai un modéle dreamweaver, et quand j'utilise l'appel de script depuis ce modéle ... rien ne se passe, les noms sont les memes ....
 
J'ai donc collé mon script directement dans le fichier html, ca marche mais je comprends pas pourkoi je peux pas appeler un script et obtenir le meme resultat ...  :pfff:

Reply

Marsh Posté le 29-03-2005 à 22:23:20    

Parce que le script a un détecteur de code-caca. Et il a détecté que ça a été fait sous DW, et du coup il refuse de se lancer :D

Reply

Marsh Posté le 25-04-2005 à 13:28:23    

Salut,
 
J'avais cru avoir fini avec ce petit probleme d'input ... Mais je viens de m'apercevoir que de temps en temps, tous marche nickel, j'ai aucun probleme pour ecrire dans l'input sous IE par exemple et que par contre sous Mozilla, ca marche pas correctement ... J'ai essayé toutes les solutions qui sont inscrites ci-dessus ... Si vous vous comprenez quelque chose ca m'interreserait, je vous met le lien de ma page internet .... http://perso.wanadoo.fr/phildenis40/Voyages.html


---------------
S'instruire sans jamais s'estimer satisfait...
Reply

Marsh Posté le 25-04-2005 à 13:57:02    

Tu peux préciser ce que tu veux que ça fasse et que ça fait pas ? (j'ai pas trop envie de tester toute ta page...)


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
Reply

Marsh Posté le 25-04-2005 à 14:02:56    

cosmoschtroumpf a écrit :

Tu peux préciser ce que tu veux que ça fasse et que ça fait pas ? (j'ai pas trop envie de tester toute ta page...)


 
Ben en fait, sur IE, j'ai trouvé mon probléme par contre sur mozilla, je comprends pas pourquoi ca marche pas ... je veux juste en fait ecrire dans les cases d'input, j'affiche la date et l'heure locale des différents pays grace a des scripts.
http://perso.wanadoo.fr/phildenis40/Voyages.html


---------------
S'instruire sans jamais s'estimer satisfait...
Reply

Marsh Posté le 25-04-2005 à 14:14:50    

Tu mets des nominput.value, il faut faire document.nomformulaire.nominput.value
 
Mais essaye quand-même de persévérer dans les getElementById().value ;)


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed