checkbox to hide/show table rows

[chunk1978]

wow... i've searched for the last 2 hours on this subject, and i still have yet to find one SIMPLE example of how to use javascript to show/hide a div-tagged table row if a checkbox is checked... if the checkbox is checked, the table row is hidden... if the checkbox isn't checked, the table is visible...

can someone please direct me to the proper information? or post some easy code for this SIMPLE problem...

thanks

[iam_clint]

<input type="checkbox" onclick="if (this.checked) { document.getElementById('hiderow').style.display = 'none'; document.getElementById('hiderow').style.visibility = 'hidden'; } else { document.getElementById('hiderow').style.display = 'inline'; document.getElementById('hiderow').style.visibility = 'visible'; }">Hide Row
<table border=1>
<tr><td>Hiding a table row
<tr id="hiderow"><td>Is as simple as 1 2 3<td>We will be hiding<td> this entire row<td>lets test it out
<tr><td>well maybe not that simple
</table>

heres a small sample i made up for hiding a table row it doesn't use a div however.

[chunk1978]

thanks... at first it didn't work, but i noticed your code you wrote "visibilit y", instead of "visibility "...

thanks for the code... i hope i can install it correctly!

[iam_clint]

yeah in the code section it seems to be a bug i'll look into this problem.

[chunk1978]

the strangest thing is happening with this code. if you continue clicking the checkbox, to make the 'hiderow' visible and hidden over and over, each time the 'hiderow' comes back the row goes further down the page... is there a way to fix that?

[acoder]

How about creating and removing the row instead, using the DOM. See here and here for more information.

[Knobbo4]

Ah so you need to set visibility AND display to hide the row. Thanks

[Samantha C]

I;ve checked out the script, in FF2, clicking the checkbox multiple times will cause the rows to expand. Is there any solution for that? Please help, I have been looking for a perfect code to show and hide rows for days

[acoder]

Welcome to TSDN!

I;ve checked out the script, in FF2, clicking the checkbox multiple times will cause the rows to expand. Is there any solution for that? Please help, I have been looking for a perfect code to show and hide rows for days

See this link for all the options for the style.display property. In this case, you'll be looking for "table-row".

[TheServant]

Hmmmm, this works on all browsers except firefox... How disappointing!

[hsriat]

Hmmmm, this works on all browsers except firefox... How disappointing!

what's not working with Firefox?

[acoder]

Hmmmm, this works on all browsers except firefox... How disappointing!

Have you tried setting style.display to "table-row"?

[TheServant]

what's not working with Firefox?

The table spaces itself out more and more everytime you collapse and expand it.

Have you tried setting style.display to "table-row"?

Yeah, it didn't work. I will try again when I get home if it is just mine that's not working, but I thought it was a common problem. The code works great for IE and Opera though.

[hsriat]

The table spaces itself out more and more everytime you collapse and expand it.




Yeah, it didn't work. I will try again when I get home if it is just mine that's not working, but I thought it was a common problem. The code works great for IE and Opera though.

It won't work with visibility='hid den'.
Use only display='none'. For visibility, there's a third value, (visibility='col lapse') which works good on rows and columns, but in Firefox only. IE gets confused there. So, don't use visibility.

[mafonso]

Hi,

I was doing a show/hide javascript function for my application but I found out that it only worked in IE and the problem was not in the hidding, but in the showing.

Then I came to this solution:

To hide, I did .style = 'none'
To show, I simply did .style = '' (empty string).

I tried 'block' and 'inline' but they didn't work in firefox in which the resulting table was all messed up.

The empty string worked for me ;-)