Hide table row with javascript (NO jQuery)

Question

I have this table element called semana2 in <tr> tag. How can I hide/show using only javascript (no jQuery)

I try this and won't work: document.getElementById('semana2').style.visibility = false;

use style.visibility = hidden instead of style.visibility = false; — Anant Dabhi
– Anant Dabhi, Commented Jun 16, 2014 at 11:55
false is not a valid value for visibility. Try hidden instead. But you might be looking for display:none rather than that... — Laurent S.
– Laurent S., Commented Jun 16, 2014 at 11:55

joews · Accepted Answer · 2014-06-16 12:18:22Z

7

false isn't a valid value for the visibility property.

You should use one of these options:

myElement.style.display = "none" (hide, and don't show an empty space)
myElement.style.visibility = "hidden" or myElement.style.opacity = 0 (hide, but show an empty space where the element would be).

opacity has the nice property that it can be animated with a CSS transition, although you should be aware of limited compatibility with IE < 9.

Incidentally, The valid values for visibility are visible | hidden | collapse - See the MDN documentation.

edited Jun 16, 2014 at 12:18

answered Jun 16, 2014 at 11:54

joews

30.4k11 gold badges82 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

fmsf · Accepted Answer · 2014-06-16 12:20:46Z

2

 document.getElementById('semana2').style.display = "none";

Visibility is also ok but you have to use it like:

document.getElementById('semana2').style.visibility = "hidden";

Just a note though, if you use visibility "hidden" the box of your element will still be rendered. I.e.: if you have a div 20x20 and apply visibility = "hidden"; to it, you will end up with a 20x20 empty square. While if you set display = "none"; then it will be like nothing is there at all.

edited Jun 16, 2014 at 12:20

answered Jun 16, 2014 at 11:54

fmsf

37.2k49 gold badges155 silver badges196 bronze badges

2 Comments

CMartins Over a year ago

funny how visibility mantains the row but hide the text, and display method hide the intire row

joews Over a year ago

display: none and visibility: hidden are not interchangable - they have different behaviours. @Carlos it's not funny - it's just the CSS spec. Also, visibility has been supported in every major browser for ages - there are no compatibility problems. It even works in IE 4.

Collectives™ on Stack Overflow

Hide table row with javascript (NO jQuery)

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related