问题
By using Javascript how to show and hide some parts of the table(Eg: TR or TD). This should work depending on the data fetched from the Database I am using CakePHP framework for my Application and using a single view file for Add and Edit. In Edit mode - Depending on the data fetched, I need to show and hide some parts of the form elements.
Scenario There are five questions A,B,C,D nad E B 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 selecting of the respective questions the other questions will be displayed. A,B,C,D - All are "Yes/No"(radio buttons) questions.
Eg:
<'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>
(' Prefix for all HTML tags)
How can I do it. Please post your comments.
回答1:
CSS has two special attributes, the first one is display
and the second is visibility
.
display
Has many properties or values, but the ones we need are none
and block
. none
is like a hide value, and block
is like show. If you use the none
value you will totally hide what ever HTML tag you have applied this CSS style. If you use block
you will see the HTML tag and its content.
visibility
Has many values, but we want to know more about the hidden
and visible
values. hidden
will work in the same way as the block
value for display, but this will hide tag and its content, but it will not hide the physical space of that tag.
For example, if you have a couple of text lines, then and image (picture) and then a table with three columns and two rows with icons and text. Now if you apply the visibility
CSS with the hidden
value to the image, the image will disappear but the space the image was using will remain in its place. In other words, you will end with a big space (hole) between the text and the table. Now if you use the visible
value your target tag and its elements will be visible again.
Then you can change them via JavaScript for display
:
document.getElementById(id).style.display = "none";
document.getElementById(id).style.display = "block";
for visibility
:
document.getElementById(id).style.visibility= "hidden";
document.getElementById(id).style.visibility= "visible";
So you can create a function that does this, and then reference that function when they select the correct answer. It depends how they select it to how you would make it show.
Otherwise if this isn't what you want the innerHTML function could also work.
回答2:
To hide an element but keep its place within the document flow (i.e. hiding it will not cause other elements to move up and fill its space), set its style.visibility
property to "hidden". To show it again, set it to "visible".
e.g.
var el = document.getElementById('a');
a.style.visibility = 'hidden';
a.style.visibility = 'visible';
To hide an element and remove it from the flow (i.e. it will be as if it wasn't in the document, other elements will fill its place) set its style.display
property to "none". To show it again (and cause a re-flow of the document because now the element will take up space again) set it to "" (empty string).
var el = document.getElementById('a');
a.style.display = 'none';
a.style.display = '';
That last bit is extremely important as it allows the element to return to its default or inherited display value, which could be any one of a number of values (and might even be different to when it was hidden).
回答3:
If you can use jQuery it's easy: ("#b").css("display","none");
or ("#b").css("display","block");
If you don't use jQuery check out this quirksmode.org article.
回答4:
to add to what M. Azad wrote, if you're using jQuery, the easier way to hide/show something is to use hide(), show(), or toggle(), like this:
("#b").hide(); or ("#b").show(); or ("#b").toggle();
toggle() will hide a visible element, or show a hidden element. These functions also have animation features. You can read about them here: http://api.jquery.com/hide/
jQuery is one terrific library. Many stackoverflow readers are well-acquainted with it, I'm sure, but for those who aren't, it's well worth studying, and their online documentation is terrific.
来源:https://stackoverflow.com/questions/5865408/javascript-css-show-and-hide-form-elements