Javascript-CSS显示和隐藏表单元素 [英] Javascript-CSS Show and Hide form elements

问题描述

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

场景
有五个问题A，B，C，D和E
B依赖于A，C依赖于B，D依赖于C，E依赖于D
所以在添加时我隐藏了B，C ，D和E
选择相应的问题，其他问题将显示。
A，B，C，D-全部为是/否（单选按钮）问题。

例如：

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

（所有HTML标记的前缀）

我该怎么做。请发表您的评论。

解决方案

CSS有两个特殊属性，第一个是 display ，第二个是可见度。

display

具有许多属性或值，但我们需要的是 none 和 block 。 none 就像一个隐藏值，而 block 就像一个显示值。如果使用 none 值，您将完全隐藏应用此CSS样式的HTML标记。如果使用 block ，您将看到HTML标记及其内容。

可见性

有很多值，但是我们想更多地了解隐藏的和可见的值。 隐藏的显示方式与 block 的显示方式相同，但这将隐藏标签及其内容，但是

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

然后您可以进行更改通过JavaScript进行显示：

  document.getElementById（id）。 style.display = none; 
 document.getElementById（id）.style.display = block; 
  

用于可见性：

  document.getElementById（id）.style.visibility = hidden; 
 document.getElementById（id）.style.visibility = visible; 
  

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

否则，如果您不希望innerHTML函数也可以正常工作。 / p>

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.

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.

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)

How can I do it. Please post your comments.

解决方案

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

display

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

visibility

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

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 visibility CSS with the hidden value 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 visible value your target tag and its elements will be visible again.

Then you can change them via JavaScript for display:

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

for 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.

这篇关于Javascript-CSS显示和隐藏表单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！