Javascript hide table row - Javascript hide row example and code

Home - Tutorials - Miscellaneous

This article demonstrates how you can hide table row with javascript and how you can show it again by pressing a button.

Tutorial info:

Name:	Javascript hide table row
Total steps:	3
Category:	Miscellaneous
Date:	2007-11-10
Level:	Beginner
Product:	See complete product
Viewed:	125003

Bookmark Javascript hide table row

Step 3 - Javascript hide row example and code

Javascript hide table row

If you have followed the tutorial you should get the same result as here:

TH-1	TH-2	TH-3
cell-11	cell-12	cell-13
cell-21	cell-22	cell-23

And the code:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript hide table row</title>
</head>
 
<body>
<script type="text/javascript">
function displayRow(){
	var row = document.getElementById("captionRow");
	if (row.style.display == '')  row.style.display = 'none';
	else row.style.display = '';
}
</script>
 
<table width="300" border="1">
  <tr id="captionRow"><th>TH-1</th><th>TH-2</th><th>TH-3</th></tr>
  <tr><td>cell-11</td><td>cell-12</td><td>cell-13</td></tr>
  <tr><td>cell-21</td><td>cell-22</td><td>cell-23</td></tr>
</table>
<p><button onclick="displayRow()" >Show / Hide</button></p>
</body>
</html>
Javascript F1

Previous Step of Javascript hide table row

Tags: javascript hide table row, javascript hide table, javascript hide row, hide table row

Javascript hide table row - Table of contents
Step 1 - Introduction
Step 2 - Hide the row
Step 3 - Javascript hide row example and code

JavaScript F1

Help in JavaScript, get JavaScript code, scripts, tutorials

Javascript hide table row - Javascript hide row example and code

Tutorial info:

Bookmark Javascript hide table row

Step 3 - Javascript hide row example and code