getElementById(id).style.display = 'none'

This table tries to use document.getElementById(id).style.display = 'none/inline'; to hide/show the first tr and the td inside of it. Notice after clicking the buttons a few times there is extra space in the table.

Foo
Bar

getElementById(id).style.display = 'none' on td but not tr

This table tries to use document.getElementById(id).style.display = 'none/inline'; to hide/show the first td BUT not the tr. Notice after clicking the buttons a few times there is extra space in the table.

Foo
Bar

modify class

This table applies a class called level1 to the tr and td and then sets the display for that class to be none/inline. (WELL IT WOULD IF I COULD FIGURE OUT HOW)

Foo
Bar