【问题标题】：Javascript-CSS Show and Hide form elementsJavascript-CSS 显示和隐藏表单元素
【发布时间】：2011-05-03 05:27:04
【问题描述】：

通过使用 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 标签的前缀)

我该怎么做。请张贴您的 cmets。

【问题讨论】：

感谢 Richard、RobG、M.Azad 的快速回复。我可以理解 CSS 属性以及如何通过 JS 来做同样的事情。我不确定这是否正确地解释了你。如果不原谅我。让我试着详细解释一下。我的问题是我使用单个页面进行添加和编辑。添加页面功能工作正常，并按照你们上面解释的方式实现。
continuation .. 在添加功能中假设以下步骤 1. 为问题 A 选择是 2. 为问题 B 选择是 3. 为问题 C 继续选择否 .... 在编辑模式下（相同页），它应该显示问题 A、B、C 并隐藏 D。但这对于每条记录都是动态的。到目前为止，我还没有实现编辑模式（这里是一个问题）。所以在编辑模式下，我只能看到问题“A”。现在，所有其他字段都被隐藏，就像添加页面一样执行。
continuation .. 解决方法应该是： 1. 首先我们需要区分添加和编辑页面。 2.如果添加。显示和隐藏各自的字段 - 将被硬编码 3. 如果编辑，如何显示和隐藏动态且基于数据库记录集的各自字段？（在我看来实现的方法很少。但正在寻找优化的方法。所以请把你的cmets和想法）希望这是有道理的..... :)

标签： javascript css cakephp-1.3

【解决方案1】：

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

显示

有很多属性或值，但我们需要的是none 和block。 none 类似于隐藏值，block 类似于显示。如果您使用 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";

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

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

【讨论】：

为了显示，不要使用'block'再次显示元素，因为display属性可以有很多不同的值（特别是TR和TD在不同的浏览器中有不同的默认显示值）。相反，请使用 ''（空字符串），以便它返回其默认值或继承值。

【解决方案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 = '';

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

【讨论】：

【解决方案3】：

如果你会使用 jQuery，那就简单了：("#b").css("display","none"); 或 ("#b").css("display","block");

如果你不使用 jQuery，请查看quirksmode.org article。

【讨论】：

【解决方案4】：

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

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

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

【讨论】：