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

Question

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

场景有五个问题A,B,C,D nad EB依赖于A,C依赖于B,D依赖于C而E依赖于D所以在添加I时我隐藏了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函数也可以工作.