[Javascript] show/hide, masquer au départ

Fermé
jdsaith Messages postés 7 Date d'inscription mercredi 13 août 2008 Statut Membre Dernière intervention 2 septembre 2009 - 13 août 2008 à 22:27
 Alérion - 11 sept. 2008 à 21:07
Bonjour,
je développe pour une activité un recueuil de fiches (informations personnelles, fiche santé...) qui est conservé sur un serveur et dans un ordinateur sur des bases de données SQL.

le côté visuel (via un navigateur) est divisé en deux; d'un côté les fiches et de l'autre un menu comportant tous les noms.

en cliqant sur un nom, j'utilise le script que voici: http://www.fiendish.demon.co.uk/html/javascript/hidetablecols.html

pour afficher/masquer la fiche correspondant au nom.

Tout marche très bien, numéro 1!

Mais si dans le script on enlève le "checked" des checkboxes, le script ne prendra pas en compte le fait qu'elles sont décochées au départ et affiche quand même les fiches!

j'ai créé une fonction qui passe le togglevis(col*); en boucle avec les correspondances, que j'ai insérée dans la balise body:
<body onLoad="setup()">
mais nada, rien ne se passe...

quelqu'un a une idée de ce que je dois faire?
A voir également:

4 réponses

Réponse 1 / 4
absurdsystem Messages postés 117 Date d'inscription mardi 14 août 2007 Statut Membre Dernière intervention 28 août 2008 50
14 août 2008 à 16:14
Slt,


rien de plus simple tu declare un petit style pour les td et tu met display:none
et tu enleve les checked (ce que tu a deja fait)




ça donne :



<html>
<head>

<script language="javascript">

// Set the default "show" mode to that specified by W3C DOM
// compliant browsers

var showMode = 'table-cell';

// However, IE5 at least does not render table cells correctly
// using the style 'table-cell', but does when the style 'block'
// is used, so handle this

if (document.all) showMode='none';

// This is the function that actually does the manipulation

function toggleVis(btn){

// First isolate the checkbox by name using the
// name of the form and the name of the checkbox

btn = document.forms['tcol'].elements[btn];

// Next find all the table cells by using the DOM function
// getElementsByName passing in the constructed name of
// the cells, derived from the checkbox name

cells = document.getElementsByName('t'+btn.name);

// Once the cells and checkbox object has been retrieved
// the show hide choice is simply whether the checkbox is
// checked or clear

mode = btn.checked ? showMode : 'none';

// Apply the style to the CSS display property for the cells

for(j = 0; j < cells.length; j++) cells[j].style.display = mode;
}



</script>
<style>
td{
display:none;
}

</style>

</head>
<body>

<table border=1 >
<tr>
<td name="tcol1" id="tcol1" class="bold">column 1 text</td>
<td name="tcol2" id="tcol2">column 2 text</td>
<td name="tcol3" id="tcol3" class="italic">column 3 text</td>
<td name="tcol4" id="tcol4">column 4 text</td>
</tr>
<tr>
<td name="tcol1" id="tcol1" class="bold">column 1 text</td>
<td name="tcol2" id="tcol2">column 2 text</td>
<td name="tcol3" id="tcol3" class="italic">column 3 text</td>
<td name="tcol4" id="tcol4">column 4 text</td>
</tr>
</table>


<form name="tcol" onsubmit="return false">
Show columns
<input type=checkbox name="col1" onclick="toggleVis(this.name)" > 1
<input type=checkbox name="col2" onclick="toggleVis(this.name)" > 2
<input type=checkbox name="col3" onclick="toggleVis(this.name)" > 3
<input type=checkbox name="col4" onclick="toggleVis(this.name)" > 4
</form>



</body>
</html>
1
Réponse 2 / 4
jdsaith Messages postés 7 Date d'inscription mercredi 13 août 2008 Statut Membre Dernière intervention 2 septembre 2009 1
14 août 2008 à 17:57
ouah, un style CSS pour pallier à mon problème! la solution est tellemetn simple qu'on y pense même pas...

étant donné que j'ai d'autres tableaux, j'ai essayé de le placer avec une classe...

ça fonctionne, mais trop bien, je ne peux maintenant plus afficher mon tableau!



<html>
<head>

<script language="javascript">

// Set the default "show" mode to that specified by W3C DOM
// compliant browsers

var showMode = 'table-cell';

// However, IE5 at least does not render table cells correctly
// using the style 'table-cell', but does when the style 'block'
// is used, so handle this

if (document.all) showMode='none';

// This is the function that actually does the manipulation

function toggleVis(btn){

// First isolate the checkbox by name using the
// name of the form and the name of the checkbox

btn = document.forms['tcol'].elements[btn];

// Next find all the table cells by using the DOM function
// getElementsByName passing in the constructed name of
// the cells, derived from the checkbox name

cells = document.getElementsByName('t'+btn.name);

// Once the cells and checkbox object has been retrieved
// the show hide choice is simply whether the checkbox is
// checked or clear

mode = btn.checked ? showMode : 'none';

// Apply the style to the CSS display property for the cells

for(j = 0; j < cells.length; j++) cells[j].style.display = mode;
}
</script>

<style>
.cacheraudepart {
display:none;
}
</style>

</head>
<body>

<table border=1 >
<tr>
<td name="tcol1" id="tcol1" class="cacheraudepart">column 1 text</td>
<td name="tcol2" id="tcol2" class="cacheraudepart">column 2 text</td>
<td name="tcol3" id="tcol3" class="cacheraudepart">column 3 text</td>
<td name="tcol4" id="tcol4" class="cacheraudepart">column 4 text</td>
</tr>
<tr>
<td name="tcol1" id="tcol1" class="cacheraudepart">column 1 text</td>
<td name="tcol2" id="tcol2"class="cacheraudepart">column 2 text</td>
<td name="tcol3" id="tcol3" class="cacheraudepart">column 3 text</td>
<td name="tcol4" id="tcol4" class="cacheraudepart">column 4 text</td>
</tr>
</table>


<form name="tcol" onsubmit="return false">
Show columns
<input type=checkbox name="col1" onclick="toggleVis(this.name)" > 1
<input type=checkbox name="col2" onclick="toggleVis(this.name)" > 2
<input type=checkbox name="col3" onclick="toggleVis(this.name)" > 3
<input type=checkbox name="col4" onclick="toggleVis(this.name)" > 4
</form>



</body>
</html>

Auriez-vous une idée de comment faire pour qu'il puisse l'afficher par après?

merci d'avance!
1
Réponse 3 / 4
absurdsystem Messages postés 117 Date d'inscription mardi 14 août 2007 Statut Membre Dernière intervention 28 août 2008 50
14 août 2008 à 18:17
re

en fait c'est du à IE sous firefox ça fonctionne nikel.


Mais je voi pas pourquoi ça ne fonctionne pas avec IE ^^
0
Réponse 4 / 4
jdsaith Messages postés 7 Date d'inscription mercredi 13 août 2008 Statut Membre Dernière intervention 2 septembre 2009 1
14 août 2008 à 18:22
malheureusement pour moi si ça ne fonctionne pas 50% du temps ça n'aidera pas mon cas!^^

je monte mes affaires sous linux mais je teste sous IE, étant donné que la plupart des personnes qui l'utilisent fonctionnent sous IE...

on dirait que le style bloque le changement de la fonction java... donc ce serait de l'appeler au départ puis de la faire disparaître :S mais ça, j'ai aucune idée de comment faire.
0
Alérion
11 sept. 2008 à 21:07
je ne sais si tu as trouvé ton bonheur,
pour quelques explications j'ai fait une petite routine qui passe toutes les id en display:none;
et quand je click je les mets en "block"
démo là: http://alerioncss.canalblog.com tu "jettes" un oeil sur le code source ;)
0

Discussions similaires

Story bloque
Juanito -
xBapt -

1 réponse
Colis shein
Lamiot -
bazfile -

4 réponses
Colis SHEIN
Louise -
Jean -

28 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses