Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage JavaScript Masquer des lignes d'un tableau

Masquer des lignes d'un tableau

10 réponses
Avatar
LR
Salut,

J'ai un formulaire dont certains champs doivent être masqués en fonction du
choix de l'utilisateur (sur un des champs du début du formulaire).

J'ai commencé par faire des trucs du style <tr id="monId1"
style="display:block"> et ensuite je fais document.getElementById(
'monId1' ).style.display = 'none'.

Le problème, c'est que avec Firefox ça pose des problèmes, lorsqu'on
masque/affiche successivement les lignes, ça provoque des espacements qui
augmentent toujours plus.

Je préfererais "encapsuler" les lignes dans un <div id="monId"> mais ça n'a
pas l'air de marcher...

Comment faire ?

Merci d'avance
Lilian
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
Thibaut Allender

J'ai commencé par faire des trucs du style <tr id="monId1"
style="display:block"> et ensuite je fais document.getElementById(
'monId1' ).style.display = 'none'.

Le problème, c'est que avec Firefox ça pose des problèmes, lorsqu'on
masque/affiche successivement les lignes, ça provoque des espacements qui
augmentent toujours plus.


normal, une ligne de tableau n'est pas un element de type block, mais un
element de type... table-row ;)
donc, alterner entre none et table-row resoud le probleme

ça fonctionne aussi avec '' (rien, donc par defaut = table-row) et none
(je pense notamment à IE qui risque de mal digérer 'table-row')

--
thibaut allender | freelance | http://capsule.org

Avatar
ASM

J'ai un formulaire dont certains champs doivent être masqués en fonction du
choix de l'utilisateur (sur un des champs du début du formulaire).

Le problème, c'est que avec Firefox ça pose des problèmes,


Peut-être éviter les tables ? et les triturages de tr ?

Comment faire ?


par exemple :
- <div id="id_1" class="groupe"> qui contient tous les chps du choix 1
- <div id="id_2" class="groupe"> qui contient tous les chps du choix 2
- <div id="id_3" class="groupe"> qui contient tous les chps du choix 3
Chaque div est dimensionné à meme taille
et positionné absolument au meme endroit (avec une classe par ex)
Et, comme tu le proposes, une fonction JS
lancée en fin de chargement de la page met ces divs à 'hidden'
Suivant le choix -> hop! le bon div est mis à 'visible'

Exemple à tester :

<html>
<style type="text/css">
.groupe, .fdgroup {
position:absolute;
top:40px;left:10px;width:400px;height:200px;
padding-left:6px;border:1px solid red;background:#ffc;
}
h3.fdgroup { background:#eee;margin:0;}
</style>
<script type="text/javascript">
function montre(choixGroupe) {
var D = document.getElementsByTagName('div');
for(var i=0;i<D.length;i++)
if(D[i].className=='groupe')
D[i].style.visibility = D[i].id==choixGroupe? 'visible': 'hidden';
}
onload=montre;
</script>
<form>
Entrez un chiffre de 1 &agrave; 3 :
<input type=text name="debut" size=4 onchange="montre('id_'+this.value);">
puis, touche [Tab]
<h3 class="fdgroup">AFFICHAGE DE VOS CHOIX</h3>
<div id="id_1" class="groupe" style="color:red">
<p>Truc 1.1 : <input type=text id="id_1_0" name="id_1_0">
<p>Truc 1.2 : <input type=text id="id_1_1" name="id_1_1">
<p>Truc 1.3 : <input type=text id="id_1_2" name="id_1_2">
... etc ...
</div>
<div id="id_2" class="groupe" style="color:green">
<p>Truc 2.1 : <input type=text id="id_2_0" name="id_2_0">
<p>Truc 2.2 : <input type=text id="id_2_1" name="id_2_1">
<p>Truc 2.3 : <input type=text id="id_2_2" name="id_2_2">
blabla
</div>
<div id="id_3" class="groupe" style="color:blue;">
<p>Truc 3.1 : <input type=text id="id_3_0" name="id_3_0">
<p>Truc 3.2 : <input type=text id="id_3_1" name="id_3_1">
<p>Truc 3.3 : <input type=text id="id_3_2" name="id_3_2">
blabla blabla
</div>
<p style="margin-top:220px">fin de test</p>
</form>
</html>

--
*******************************************************
Stéphane MORIAUX et son vieux Mac
Aide Pages Perso (images & couleurs, formulaire, CHP)
http://perso.wanadoo.fr/stephane.moriaux/internet/
*******************************************************

Avatar
Thibaut Allender
J'ai un formulaire dont certains champs doivent être masqués en fonction du
choix de l'utilisateur (sur un des champs du début du formulaire).


Peut-être éviter les tables ? et les triturages de tr ?


tiens, c'est vrai, je n'ai pas relevé l'association formulaire et tables ;)
merci de l'avoir fait

--
thibaut allender | freelance | http://capsule.org


Avatar
Saad Saad
Génial,

Cela faisait trois jours que je me demandais pourquoi mes inputs dans
les lignes d'un tableau n'étaient plus aligner après display:block

avec table-row, c'est nikel

merci






J'ai commencé par faire des trucs du style <tr id="monId1"
style="display:block"> et ensuite je fais document.getElementById(
'monId1' ).style.display = 'none'.

Le problème, c'est que avec Firefox ça pose des problèmes, lorsqu'on
masque/affiche successivement les lignes, ça provoque des espacements qui
augmentent toujours plus.



normal, une ligne de tableau n'est pas un element de type block, mais un
element de type... table-row ;)
donc, alterner entre none et table-row resoud le probleme

ça fonctionne aussi avec '' (rien, donc par defaut = table-row) et none
(je pense notamment à IE qui risque de mal digérer 'table-row')




Avatar
LR
Peut-être éviter les tables ? et les triturages de tr ?


tiens, c'est vrai, je n'ai pas relevé l'association formulaire et tables
;)
merci de l'avoir fait


C'est quoi le problème avec les tables ? Comment je fais si je veux aligner
les champs de mon formulaire ?


Avatar
ASM

Peut-être éviter les tables ? et les triturages de tr ?


tiens, c'est vrai, je n'ai pas relevé l'association formulaire et tables
;)
merci de l'avoir fait


C'est quoi le problème avec les tables ? Comment je fais si je veux aligner
les champs de mon formulaire ?


rajouter des regles de css à celles proposées dans le test-exemple?

.groupe p { display:block; position:relative; width:80%;
background:#ff0; margin: 2px 5%; }
.groupe input { display:block; position:absolute;
width: 40%; left:50%; }

non vérifié partout et à creuser

--
*******************************************************
Stéphane MORIAUX et son vieux Mac
Aide Pages Perso (images & couleurs, formulaire, CHP)
http://perso.wanadoo.fr/stephane.moriaux/internet/
*******************************************************



Avatar
LR
J'ai commencé par faire des trucs du style <tr id="monId1"
style="display:block"> et ensuite je fais document.getElementById(
'monId1' ).style.display = 'none'.

Le problème, c'est que avec Firefox ça pose des problèmes, lorsqu'on
masque/affiche successivement les lignes, ça provoque des espacements qui
augmentent toujours plus.


normal, une ligne de tableau n'est pas un element de type block, mais un
element de type... table-row ;)
donc, alterner entre none et table-row resoud le probleme

ça fonctionne aussi avec '' (rien, donc par defaut = table-row) et none
(je pense notamment à IE qui risque de mal digérer 'table-row')


Parfait, ça marche à merveille.
Merci pour ton aide
Lilian


Avatar
LR
Peut-être éviter les tables ? et les triturages de tr ?


tiens, c'est vrai, je n'ai pas relevé l'association formulaire et
tables
;)
merci de l'avoir fait


C'est quoi le problème avec les tables ? Comment je fais si je veux
aligner
les champs de mon formulaire ?


rajouter des regles de css à celles proposées dans le test-exemple?

.groupe p { display:block; position:relative; width:80%;
background:#ff0; margin: 2px 5%; }
.groupe input { display:block; position:absolute;
width: 40%; left:50%; }

non vérifié partout et à creuser


Mouais, je ne doute pas de l'utilité de CSS, je l'utilise d'ailleurs pour
maintenir le design mais pour ce qui est de la disposition des éléments, je
reste encore fidel aux bons vieux tableaux.

Est-ce qu'il y a vraiment des problèmes de compatibilité entre les tableaux
et les formulaires ?




Avatar
ASM

Est-ce qu'il y a vraiment des problèmes de compatibilité entre les tableaux
et les formulaires ?


met ton formulaire en ligne
je regarde avec mon IE5.1 vieux Mac et te dis si çà fonctionne
(svp : pas d'images -> je suis en RTC)

--
*******************************************************
Stéphane MORIAUX et son vieux Mac
Aide Pages Perso (images & couleurs, formulaire, CHP)
http://perso.wanadoo.fr/stephane.moriaux/internet/
*******************************************************

Avatar
Thibaut Allender
Mouais, je ne doute pas de l'utilité de CSS, je l'utilise d'ailleurs pour
maintenir le design mais pour ce qui est de la disposition des éléments, je
reste encore fidel aux bons vieux tableaux.

Est-ce qu'il y a vraiment des problèmes de compatibilité entre les tableaux
et les formulaires ?


http://www.openweb.eu.org/articles/problemes_tableaux/

fu2 adapté, plus par principe que pour relancer un Nieme debat, les
archives sont deja bien fournies...

--
thibaut allender | freelance | http://capsule.org