Javascript-CSS 显示和隐藏表单元素

Javascript-CSS Show and Hide form elements

提问by user599531

By using Javascript how to show and hide some parts of the table(Eg: TR or TD). This should work depending on the data fetched from the Database I am using CakePHP framework for my Application and using a single view file for Add and Edit. In Edit mode - Depending on the data fetched, I need to show and hide some parts of the form elements.

通过使用 Javascript 如何显示和隐藏表格的某些部分（例如：TR 或 TD）。这应该取决于从数据库获取的数据我正在为我的应用程序使用 CakePHP 框架并使用单个视图文件进行添加和编辑。在编辑模式下 - 根据获取的数据，我需要显示和隐藏表单元素的某些部分。

Scenario There are five questions A,B,C,D nad E B is dependent on A, C is dependent on B, D is dependent on C and E is dependent on D So while adding I have hidden B,C,D and E on selecting of the respective questions the other questions will be displayed. A,B,C,D - All are "Yes/No"(radio buttons) questions.

场景有五个问题 A,B,C,D nad EB 依赖于 A，C 依赖于 B，D 依赖于 C，E 依赖于 D 所以在添加我的同时，我有隐藏的 B、C、D 和 E选择相应的问题，将显示其他问题。A、B、C、D - 都是“是/否”（单选按钮）问题。

Eg:

例如：

<'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>

(' Prefix for all HTML tags)

(' 所有 HTML 标签的前缀)

How can I do it. Please post your comments.

我该怎么做。请发表您的意见。

回答by Richard

CSS has two special attributes, the first one is displayand the second is visibility.

CSS 有两个特殊属性，第一个是display，第二个是visibility。

display

展示

Has many properties or values, but the ones we need are noneand block. noneis like a hide value, and blockis like show. If you use the nonevalue you will totally hide what ever HTML tag you have applied this CSS style. If you use blockyou will see the HTML tag and its content.

有很多属性或值，但我们需要的是noneand block。none就像隐藏值，block就像显示。如果您使用该none值，您将完全隐藏您应用此 CSS 样式的任何 HTML 标签。如果您使用，block您将看到 HTML 标记及其内容。

visibility

能见度

Has many values, but we want to know more about the hiddenand visiblevalues. hiddenwill work in the same way as the blockvalue for display, but this will hide tag and its content, but it will not hide the physical space of that tag.

有很多值，但我们想更多地了解hidden和visible值。hidden将与block显示值的工作方式相同，但这将隐藏标签及其内容，但不会隐藏该标签的物理空间。

For example, if you have a couple of text lines, then and image (picture) and then a table with three columns and two rows with icons and text. Now if you apply the visibilityCSS with the hiddenvalue to the image, the image will disappear but the space the image was using will remain in its place. In other words, you will end with a big space (hole) between the text and the table. Now if you use the visiblevalue your target tag and its elements will be visible again.

例如，如果您有几个文本行，然后是图像（图片），然后是一个包含三列两行图标和文本的表格。现在，如果您将visibility带有该hidden值的CSS应用于图像，图像将消失，但图像使用的空间将保留在原位。换句话说，您将以文本和表格之间的大空间（洞）结束。现在，如果您使用该visible值，您的目标标签及其元素将再次可见。

Then you can change them via JavaScript for display:

然后您可以通过 JavaScript 更改它们display：

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

for visibility:

对于visibility：

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

So you can create a function that does this, and then reference that function when they select the correct answer. It depends how they select it to how you would make it show.

因此，您可以创建一个执行此操作的函数，然后在他们选择正确答案时引用该函数。这取决于他们如何选择它以及您将如何显示它。

Otherwise if this isn't what you want the innerHTML function could also work.

否则，如果这不是您想要的，innerHTML 函数也可以工作。

回答by RobG

To hide an element but keep its place within the document flow (i.e. hiding it will not cause other elements to move up and fill its space), set its style.visibilityproperty to "hidden". To show it again, set it to "visible".

要隐藏元素但保持其在文档流中的位置（即隐藏它不会导致其他元素向上移动并填充其空间），请将其style.visibility属性设置为“隐藏”。要再次显示，请将其设置为“可见”。

e.g.

例如

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

To hide an element and remove it from the flow (i.e. it will be as if it wasn't in the document, other elements will fill its place) set its style.displayproperty to "none". To show it again (and cause a re-flow of the document because now the element will take up space again) set it to "" (empty string).

要隐藏一个元素并将其从流中删除（即，它就好像它不在文档中一样，其他元素将填充它的位置）将其style.display属性设置为“none”。要再次显示它（并导致文档重新流动，因为现在该元素将再次占用空间）将其设置为“”（空字符串）。

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

That last bit is extremely important as it allows the element to return to its default or inherited display value, which could be any one of a number of values (and might even be different to when it was hidden).

最后一点非常重要，因为它允许元素返回其默认或继承的显示值，该值可以是多个值中的任何一个（甚至可能与隐藏时不同）。

回答by M.Azad

If you can use jQuery it's easy: ("#b").css("display","none");or ("#b").css("display","block");

如果您可以使用 jQuery，则很容易：("#b").css("display","none");或("#b").css("display","block");

If you don't use jQuery check out this quirksmode.org article.

如果您不使用 jQuery，请查看这篇quirksmode.org 文章。

回答by yitwail

to add to what M. Azad wrote, if you're using jQuery, the easier way to hide/show something is to use hide(), show(), or toggle(), like this: ("#b").hide(); or ("#b").show(); or ("#b").toggle();

添加到 M. Azad 写的内容，如果您使用 jQuery，隐藏/显示某些内容的更简单方法是使用 hide()、show() 或 toggle()，如下所示： ("#b").hide(); or ("#b").show(); or ("#b").toggle();

toggle() will hide a visible element, or show a hidden element. These functions also have animation features. You can read about them here: http://api.jquery.com/hide/

toggle() 将隐藏可见元素，或显示隐藏元素。这些功能还具有动画功能。您可以在此处阅读有关它们的信息：http: //api.jquery.com/hide/

jQuery is one terrific library. Many stackoverflow readers are well-acquainted with it, I'm sure, but for those who aren't, it's well worth studying, and their online documentation is terrific.

jQuery 是一个了不起的库。我敢肯定，许多 stackoverflow 读者都非常熟悉它，但对于那些不熟悉的人，它非常值得学习，而且他们的在线文档非常棒。