[Javascript] show/hide, masquer au départ
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?
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?
4 réponses
-
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.-
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 ;)
-
-
re
en fait c'est du à IE sous firefox ça fonctionne nikel.
Mais je voi pas pourquoi ça ne fonctionne pas avec IE ^^ -
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! -
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>
