tucdual | Bonjour,
Je suis nouveau sur la liste alors ma question vous paraîtra peut être évidente. J'ai fais un script pour masquer/afficher des div avec des boutons radio, ça fonctionne sous ie mais rien sous firefox (ni chrome) merci de votre aide voici le code
Code :
- <HTML>
- <HEAD>
- <!-- Menu html/js/ex/5.bk Hiding Table Columns -->
- <link rel="stylesheet" type="text/css" href="../../default.css">
- <TITLE>JavaScript - Hiding Table Columns</TITLE>
- <style type="text/css">
- #progmenu { position:absolute; top:0; left:0; visibility:hidden; }
- #miscmenu { position:absolute; top:0; left:0; visibility:hidden; }
- .TitleMenu { width:110; }
- .TitleMenuItem { }
- </style>
- <script language="javascript">
- var showMode = 'block';//'table-cell';
- if (document.all) showMode='block';
- function toggleVis(radio){
- name=radio;
- radio = document.forms['tcol'].elements[radio];
- for(j = 0; j < radio.length; j++){
- if (radio[j].checked){
- max=j;
- }
- }
- for (k=0;k<4;k++){
- cells = document.getElementsByName('div'+radio[k].value);
- if (max!=4){
- if (k==max)
- mode = showMode;
- else
- mode = 'none';
- }else{
- mode = showMode;
- }
- for(j = 0; j < cells.length; j++)
- cells[j].style.display=mode;
- }
- }
- </script>
- </HEAD>
- <BODY MARGINWIDTH=0 MARGINHEIGHT=0 onload="init()">
- <form name="tcol" onsubmit="return false">
- <table border=0 bgcolor="#ffeecc">
- <tr><td>
- Show columns
- <input type=radio name="col1" value="col1" onclick="toggleVis(this.name)"> 1
- <input type=radio name="col1" value="col2" onclick="toggleVis(this.name)"> 2
- <input type=radio name="col1" value="col3" onclick="toggleVis(this.name)"> 3
- <input type=radio name="col1" value="col4" onclick="toggleVis(this.name)"> 4
- <input type=radio name="col1" value="all" onclick="toggleVis(this.name)" checked> all
- </td></tr>
- </table>
- </form>
- <div id="divcol1" style="border: 2px solid rgb(209, 29, 67); padding: 5px; margin-top: 5px;">
- <p>#1 : Ici mon texte</p>
- </div>
- <div id="divcol2" style="border: 2px solid rgb(209, 29, 67); padding: 5px;">
- <p>#2 : Ici mon texte</p>
- </div>
- <div id="divcol3" style="border: 2px solid rgb(209, 29, 67); padding: 5px;">
- <p>#3 : Ici mon texte</p>
- </div>
- <div id="divcol4" style="border: 2px solid rgb(209, 29, 67); padding: 5px;">
- <p>#4 : Ici mon texte</p>
- </div>
- </BODY>
- </HTML>
- </head>
|
Message édité par tucdual le 04-10-2010 à 09:40:23
|