Javascript-CSS d'Afficher et de Masquer des éléments de formulaire

À l'aide de Javascript comment afficher et masquer certaines parties de la table(par exemple: TR ou TD). Cela devrait fonctionner selon les données extraites de la Base de données
Je suis à l'aide de framework CakePHP pour mon Application et à l'aide d'une vue unique fichier pour Ajouter et Modifier.
En mode Édition, Selon les données extraites, j'ai besoin d'afficher et de masquer certaines parties de la forme des éléments.

Scénario
Il y a cinq questions A,B,C,D, E nad
B dépend de A, C dépend de B, D dépend de C et E dépend D
Donc, tout en ajoutant que j'ai caché, B,C,D et E
sur la sélection de chacune des questions, les autres questions seront affichées.
A,B,C,D sont Tous des "Oui/Non"(boutons radio) questions.

Par exemple: 

<'table>
<'tr id='a'>
  <'td colspan='2'>A<'/td>
<'/tr>  
<'tr id='b'>
  <'td colspan='2'>B<'/td>
<'/tr>
<'tr id='cd'>
  <'td id='c'>C<'/td><'td id='d'>D<'/td>
<'/tr>
<'/table>

(' Préfixe pour toutes les balises HTML)

Comment puis-je le faire. Merci de poster vos commentaires.

  • Merci Richard,RobG,M. Azad pour votre réponse rapide. Je peux comprendre les propriétés CSS et comment faire la même chose en JS. Je ne suis pas certain d'avoir expliqué correctement. Si pas, excusez-moi. Laissez-moi vous expliquer en détail. Ma question est que je suis en utilisant une seule page pour AJOUTER et MODIFIER. Ajouter des fonctionnalités de page fonctionne très bien et ont mis en œuvre par la façon dont vous les gars expliqué ci-dessus.
  • continuation .. Assumer les étapes suivantes dans ajouter des fonctionnalités 1. Sélectionnez oui pour la Question 2. Sélectionnez oui pour la Question 3. B Sélectionnez non pour la Question C continuation .... Dans le mode Edit (même page), il devrait afficher la question A,B,C et masquer D. Mais c'est dynamique pour chaque enregistrement. Je n'ai pas encore mis en œuvre pour le mode edit (C'est une Question ici). Donc, en mode edit, je peux voir seulement question "Un". Dès maintenant, tous les autres champs sont masqués qui est en cours d'exécution comme ajouter une page.
  • continuation .. La solution doit être: 1. Nous avons d'abord besoin de se différencier d'ajouter et de modifier la page. 2. Si ajouter. afficher et masquer les champs respectifs qui seront codés en dur 3. Si l'option modifier, comment faire pour afficher et masquer les champs respectifs qui est dynamique et fondée sur la DB de l'enregistrement jeu? (Il existe peu de moyens à mettre en œuvre dans mon esprit. Mais la recherche de l'optimisation de la sorte. Donc, s'il vous plaît mettez la vôtre commentaires et pensées), Espérons que cela a du sens..... 🙂
InformationsquelleAutor user599531 | 2011-05-03
  1. 14

    CSS a deux caractéristiques particulières, le premier est display et la deuxième est visibility.

    affichage

    A beaucoup de propriétés ou de valeurs, mais celles que nous avons besoin, ce sont des none et block. none est comme une peau de valeur, et block est comme show. Si vous utilisez le none valeur vous sera totalement masquer ce que jamais balise HTML que vous avez appliqué ce style CSS. Si vous utilisez block vous verrez la balise HTML et son contenu.

    visibilité

    A beaucoup de valeurs, mais nous voulons en savoir plus sur la hidden et visible valeurs. hidden fonctionnera de la même manière que le block valeur pour l'affichage, mais cela permet de masquer la balise et son contenu, mais il ne sera pas cacher l'espace physique de cette balise.

    Par exemple, si vous avez un couple de lignes de texte, puis et de l'image (photo) puis un tableau avec trois colonnes et deux lignes avec des icônes et du texte. Maintenant, si vous appliquez le visibility CSS avec le hidden de la valeur à l'image, l'image disparaît mais l'espace de l'image à l'aide restera à sa place. En d'autres termes, vous allez vous retrouver avec un grand espace (un trou) entre le texte et le tableau. Maintenant, si vous utilisez le visible la valeur de votre balise cible et de ses éléments sera de nouveau visible.

    Ensuite, vous pouvez les modifier via le JavaScript pour display:

    document.getElementById(id).style.display = "none";
document.getElementById(id).style.display = "block";

    pour visibility:

    document.getElementById(id).style.visibility= "hidden";
document.getElementById(id).style.visibility= "visible";

    Vous pouvez donc créer une fonction qui fait cela, et puis de référence qui fonctionnent quand ils choisir la bonne réponse.
    Il dépend de la façon dont ils le sélectionner de la façon dont vous la faire apparaître.

    Sinon, si ce n'est pas ce que vous voulez l'innerHTML fonction pourrait également fonctionner.

    • Pour l'affichage, ne pas utiliser de "bloquer" pour afficher l'élément nouveau depuis les propriétés d'affichage peut avoir de nombreuses valeurs différentes (en particulier, TR et TD ont différents d'affichage par défaut des valeurs dans les différents navigateurs). Au lieu de cela, utiliser " (chaîne vide) donc ça revient à sa valeur par défaut ou la valeur héritée.
    • qui fonctionne pas trop
    InformationsquelleAutor Richard
  2. 2

    Pour masquer un élément, mais garder sa place dans le flux de documents (c'est à dire de cacher qu'il ne cause d'autres éléments à déplacer et remplir son espace), de définir sa style.visibility à la propriété "caché". Pour l'afficher de nouveau, réglez-le sur "visible".

    par exemple

    var el = document.getElementById('a');
a.style.visibility = 'hidden';
a.style.visibility = 'visible';

    Pour masquer un élément et de le retirer de la circulation (c'est à dire qu'il sera comme si elle n'était pas dans le document, d'autres éléments de remplir sa place) définir sa style.display à la propriété "none". Pour afficher à nouveau (et de provoquer une ré-écoulement du document, parce que maintenant l'élément de l'espace de nouveau) est réglé à "" (chaîne vide).

    var el = document.getElementById('a');
a.style.display = 'none';
a.style.display = '';

    Que le dernier bit est extrêmement important car il permet à l'élément à retourner à son défaut ou hérité de la valeur d'affichage, qui pourrait être n'importe lequel d'un certain nombre de valeurs (et peut-être même différente quand il était caché).

    InformationsquelleAutor RobG
  3. 1

    Si vous pouvez utiliser jQuery c'est facile: ("#b").css("display","none"); ou ("#b").css("display","block");

    Si vous n'utilisez pas de jQuery découvrez ce quirksmode.org l'article.

    InformationsquelleAutor M.Azad
  4. 0

    à ajouter à ce que M. Azad a écrit, si vous êtes à l'aide de jQuery, la façon la plus facile de cacher/montrer quelque chose est à utiliser hide(), afficher () ou toggle(), comme ceci:
    ("#b").hide(); or ("#b").show(); or ("#b").toggle();

    toggle() permet de masquer un élément visible, ou de montrer un élément masqué. Ces fonctions ont également des fonctions d'animation. Vous pouvez lire à leur sujet ici: http://api.jquery.com/hide/

    jQuery est une formidable bibliothèque. De nombreux stackoverflow les lecteurs sont bien familiarisés avec elle, j'en suis sûr, mais pour ceux qui ne le sont pas, c'est bien la peine de les étudier, et de leur documentation en ligne est terrible.

    InformationsquelleAutor yitwail