Beginner: Hide TR on page load

**danwednesday** · Mar 29, 2007 02:28

Hi,

I want to have Javascript hide a table row (tr) when the page is called, then have links to show/hide the tr as a toggle.

The show/hide links work fine, but I can't get the tr to be hidden when the page loads. I'm trying to do this with an external (not inline) function so that I can eventually put all my Javascript into it's own file. Can anyone see how to make this work?

Code:

<html>
<head>
<script type="text/javascript">
function funHideTR() {
	var rowToHide = document.getElementById('tablerow');
	if (rowToHide) then {
		rowToHide.style.display='none';
	}
}
</script>
</head>
<body onload="funHideTR();">
<a href="#" onclick="document.getElementById('tablerow').style.display=''">Show contents</a><br />
<a href="#" onclick="document.getElementById('tablerow').style.display='none'">Hide contents</a>
<table width="400">
<tr id="tablerow">
<td>Contents of table row<td>
</tr>
</table>
</body>
</html>

Thanks for any help folks!

**danwednesday** · Mar 29, 2007 02:35

Got it!!

Code:

<html>
<head>
<title>My Doc</title>
<script type="text/javascript">
function funHideTR() {
	var rowToHide;
	rowToHide = document.getElementById('tablerow');
	if (rowToHide) {
		rowToHide.style.display='none';
	}
}
</script>
</head>
<body onload="funHideTR();">
<a href="#" onclick="document.getElementById('tablerow').style.display=''">Show contents</a><br />
<a href="#" onclick="document.getElementById('tablerow').style.display='none'">Hide contents</a>
<table width="400">
<tr id="tablerow">
<td>Contents of table row<td>
</tr>
</table>
</body>
</html>

The "var" declaration in the script needs to be on it's own line. You can't populate it at the same time as declaring it (unlike VBScript, which I'm used to). Great!!

**Kravvitz** · Mar 29, 2007 03:04

The "var" declaration in the script needs to be on it's own line. You can't populate it at the same time as declaring it.

No, it doesn't need to be on separate lines. The problem was the "then" keyword, not that.

Using body's inline onload attribute is bad practice. Using inline event handlers on other elements is not best practice, because it's best to put all JavaScript, including events, in external .js files. It's even worse to use them on <body> because they will overwrite any events for window defined in other JavaScript code blocks. I suggest you read up on Unobtrusive JavaScript.

Try this.

Code:

<script type="text/javascript">
function funHideTR() {
	if (!document.getElementById) return;
	var rowToHide = document.getElementById('tablerow');
	if (rowToHide) {
		rowToHide.style.display='none';
	}
}
window.onload = funHideTR;
</script>
</head>
<body>

P.S. Why did you start a new thread instead of continuing the old one?

User Tag List

Thread: Beginner: Hide TR on page load

Thread Tools

Display

Beginner: Hide TR on page load

Bookmarks

Bookmarks

Posting Permissions