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

Question

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

Scenario There are five questions A,B,C,D nad EB 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选择相应的问题将显示其他问题。 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 标签的前缀)

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

Answer 1

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

展示

有很多属性或值，但我们需要的是none和block 。 none类似于 hide 值， block类似于 show。 如果您使用none值，您将完全隐藏您已应用此 CSS 样式的 HTML 标签。 如果您使用block ，您将看到 HTML 标记及其内容。

能见度

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

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

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

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

visibility ：

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

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

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

Answer 2

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

例如

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

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

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

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

Answer 3

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

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

Answer 4

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

toggle() 将隐藏可见元素，或显示隐藏元素。 这些函数还具有 animation 特性。 你可以在这里阅读它们： http://api.jquery.com/hide/

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