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

Question

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

场景有 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标签的前缀)

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

Answer 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";

可见性:

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

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

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