显示

Question

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

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

Answer 1

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

显示

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

能见度

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

例如，如果您有几个文本行，那么和图像（图片），然后是一个包含三列和两行图标和文本的表。现在，如果您将visibility具有hidden值的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函数也可以工作。

Answer 2

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

e.g。

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

Answer 4

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

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

jQuery是一个了不起的库。很多stackoverflow读者都很熟悉它，我敢肯定，但对于那些没有的人来说，非常值得研究，他们的在线文档非常棒。

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

4 个答案:

显示

能见度