[HTML/Javascript/CSS] [resolu] spoiler une partie de tableau

spoiler une partie de tableau [HTML/Javascript/CSS] [resolu] - HTML/CSS - Programmation

Marsh Posté le 20-11-2008 à 15:45:35    

[:papatte] les bizounours [:ginie]
 
[:noxauror]
 
Imaginons deux codes quasiment identiques:  

Code :
  1. <html> 
  2.     <head> 
  3.         <style type="text/css">.details { display:none; }</style> 
  4.         <script> 
  5.         function change() { 
  6.             if (document.getElementById("details" ).style.display == "none" ) { 
  7.                 document.getElementById("details" ).style.display = "block"; 
  8.                 document.getElementById("caption" ).innerHTML = "Effacer"; 
  9.             } else { 
  10.                 document.getElementById("details" ).style.display = "none"; 
  11.                 document.getElementById("caption" ).innerHTML = "Afficher"; 
  12.             } 
  13.         }       
  14.         </script> 
  15.     </head> 
  16.     <body> 
  17.             <table style="width:100%; border:1px; border-style:solid;"> 
  18.                 <tr><td><a id="caption" href="#" onclick="change();">Afficher</a></td></tr> 
  19.                 <tr><td><div class="details" id="details">Le texte qui va apparaitre sous le nom du texte 1</div></td></tr> 
  20.                 <tr><td>Blabla</td></tr> 
  21.             </table> 
  22.     </body> 
  23. </html>


 
et  
 

Code :
  1. <html> 
  2.     <head> 
  3.         <script> 
  4.         function change() { 
  5.             if (document.getElementById("details" ).style.display == "none" ) { 
  6.                 document.getElementById("details" ).style.display = "block"; 
  7.                 document.getElementById("caption" ).innerHTML = "Effacer"; 
  8.             } else { 
  9.                 document.getElementById("details" ).style.display = "none"; 
  10.                 document.getElementById("caption" ).innerHTML = "Afficher"; 
  11.             } 
  12.         }       
  13.         </script> 
  14.     </head> 
  15.     <body> 
  16.             <table style="width:100%; border:1px; border-style:solid;"> 
  17.                 <tr><td><a id="caption" href="#" onclick="change();">Afficher</a></td></tr> 
  18.                 <tr><td><div style="display:none;" id="details">Le texte qui va apparaitre sous le nom du texte 1</div></td></tr> 
  19.                 <tr><td>Blabla</td></tr> 
  20.             </table> 
  21.     </body> 
  22. </html>


 
Pourquoi, avec le premier, je suis obligé de cliquer 2 fois (la 1ere fois seulement) pour faire apparaitre le texte, alors qu'avec le second ça marche directement [:quardelitre dei]


Message édité par wedgeant le 21-11-2008 à 13:34:29

---------------
Wedge#2487 @HS -#- PW: +∞ -#- Khaz-Modan/Boltiz @WoW
Reply

Marsh Posté le 20-11-2008 à 15:45:35   

Reply

Marsh Posté le 20-11-2008 à 15:47:45    

parceque dans le premier cas .style.display est vide


---------------

Reply

Marsh Posté le 20-11-2008 à 15:49:56    

beuh [:toukc]
la balise <style> n'est pas prise en compte pour remplir .style ? :??:


---------------
Wedge#2487 @HS -#- PW: +∞ -#- Khaz-Modan/Boltiz @WoW
Reply

Marsh Posté le 20-11-2008 à 15:50:25    

nan  
 
document.getElementById("details" ).style ne contient que les styles inline de ton element  

Message cité 2 fois

---------------

Reply

Marsh Posté le 20-11-2008 à 15:53:09    

flo850 a écrit :

nan  
 
document.getElementById("details" ).style ne contient que les styles inline de ton element  


raison pour laquelle on peut écrire elm.style = '' pour revenir au style par défaut (dans un taggle)

Message cité 1 fois

---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box, and replicate and expand beyond their wildest dreams by throwing away the limits imposed by overbearing genetic r
Reply

Marsh Posté le 20-11-2008 à 15:59:21    

flo850 a écrit :

nan  
 
document.getElementById("details" ).style ne contient que les styles inline de ton element  


ah ok, bon ben j'aurais appris quelque chose aujourd'hui alors, mici [:romf]


---------------
Wedge#2487 @HS -#- PW: +∞ -#- Khaz-Modan/Boltiz @WoW
Reply

Marsh Posté le 21-11-2008 à 12:59:58    

Re [:pato el canardo]  
 
Toujours dans ma quête du spoiler idéal, je cherche à pouvoir faire apparaitre/disparaitre (shazam [:prodigy]) une cellule voir même ligne entière d'un tableau.
 
J'ai essayé de faire ça:

Code :
  1. <table style="width:100%; border:1px; border-style:solid;"> 
  2.     <tr><td colspan=2><a id="caption" href="#" onclick="spoiler();">Afficher</a></td></tr> 
  3.         <div id="details" style="display:none;"> 
  4.             <tr><td>blabla</td><td>blabla</td></tr> 
  5.         </div> 
  6.     <tr><td>bloblo</td><td>bloblo</td></tr> 
  7. </table>


seulement voila, ça marche pas parce que "display:none" n'est pas un attribut de table [:transparency]
 
quelqu'un aurait une idée ?  [:parisbreizh]  [:islord]

Message cité 2 fois
Message édité par wedgeant le 21-11-2008 à 13:00:21

---------------
Wedge#2487 @HS -#- PW: +∞ -#- Khaz-Modan/Boltiz @WoW
Reply

Marsh Posté le 21-11-2008 à 13:02:42    

sudo rm -rf /


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box, and replicate and expand beyond their wildest dreams by throwing away the limits imposed by overbearing genetic r
Reply

Marsh Posté le 21-11-2008 à 13:05:31    

ça m'aide énormément [:cerveau dawak]


---------------
Wedge#2487 @HS -#- PW: +∞ -#- Khaz-Modan/Boltiz @WoW
Reply

Marsh Posté le 21-11-2008 à 13:35:56    

bon, j'ai trouvé quelque chose [:dawa]
 

Code :
  1. <table style="width:100%; border:1px; border-style:solid;"> 
  2.     <tr><td colspan=2><a id="caption" href="#" onclick="spoiler();">Afficher</a></td></tr> 
  3.         <tr id="details" style="visibility:collapse;"><td>blabla</td><td>blabla</td></tr> 
  4.     <tr><td>bloblo</td><td>bloblo</td></tr> 
  5. </table>


 
 [:parisbreizh]


---------------
Wedge#2487 @HS -#- PW: +∞ -#- Khaz-Modan/Boltiz @WoW
Reply

Marsh Posté le 21-11-2008 à 13:35:56   

Reply

Marsh Posté le 21-11-2008 à 13:37:28    

tree

Reply

Marsh Posté le 21-11-2008 à 13:41:03    

mézencore ? [:noxauror]


---------------
Wedge#2487 @HS -#- PW: +∞ -#- Khaz-Modan/Boltiz @WoW
Reply

Marsh Posté le 21-11-2008 à 13:42:17    

wedgeant a écrit :

Re [:pato el canardo]  
 
Toujours dans ma quête du spoiler idéal, je cherche à pouvoir faire apparaitre/disparaitre (shazam [:prodigy]) une cellule voir même ligne entière d'un tableau.
 
J'ai essayé de faire ça:

Code :
  1. <table style="width:100%; border:1px; border-style:solid;"> 
  2.     <tr><td colspan=2><a id="caption" href="#" onclick="spoiler();">Afficher</a></td></tr> 
  3.         <div id="details" style="display:none;"> 
  4.             <tr><td>blabla</td><td>blabla</td></tr> 
  5.         </div> 
  6.     <tr><td>bloblo</td><td>bloblo</td></tr> 
  7. </table>


seulement voila, ça marche pas parce que "display:none" n'est pas un attribut de table [:transparency]
 
quelqu'un aurait une idée ?  [:parisbreizh]  [:islord]


Tu cherches à faire quoi là ? T'as essayé de passer hidden displayed rawmode au lieu de ton infame bouillie ?

Reply

Marsh Posté le 21-11-2008 à 14:42:12    

masklinn a écrit :


raison pour laquelle on peut écrire elm.style = '' pour revenir au style par défaut (dans un taggle)


taggle  [:ineffable]

Message cité 1 fois
Reply

Marsh Posté le 21-11-2008 à 14:46:43    

Uriaiche a écrit :


taggle  [:ineffable]


Ouais taggle :o


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box, and replicate and expand beyond their wildest dreams by throwing away the limits imposed by overbearing genetic r
Reply

Marsh Posté le 21-11-2008 à 15:12:18    

wedgeant a écrit :

Re [:pato el canardo]  
 
Toujours dans ma quête du spoiler idéal, je cherche à pouvoir faire apparaitre/disparaitre (shazam [:prodigy]) une cellule voir même ligne entière d'un tableau.
 
J'ai essayé de faire ça:

Code :
  1. <table style="width:100%; border:1px; border-style:solid;"> 
  2.     <tr><td colspan=2><a id="caption" href="#" onclick="spoiler();">Afficher</a></td></tr> 
  3.         <div id="details" style="display:none;"> 
  4.             <tr><td>blabla</td><td>blabla</td></tr> 
  5.         </div> 
  6.     <tr><td>bloblo</td><td>bloblo</td></tr> 
  7. </table>


seulement voila, ça marche pas parce que "display:none" n'est pas un attribut de table [:transparency]
 
quelqu'un aurait une idée ?  [:parisbreizh]  [:islord]


 
Depuis quand le display serait un attribut.
display c'est un attribut de l'objet Style de chaque élément et display:none marche sur n'importe quel élément.
Je te prie donc d'arrêter la drogue

Reply

Marsh Posté le 21-11-2008 à 15:27:07    

à la demande de son auteur, je ferme le topic


---------------
J'ai un string dans l'array (Paris Hilton)
Reply

Sujets relatifs:

Leave a Replay

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