show table rows (new to js)

**JohnShell** · 09-08-2010, 06:55 PM

Hi,

Have table with 5 rows - first two are visible - last three are not. Used this to hide last three

Code:

<tr id="row1" style="display: none">
<tr id="row2" style="display: none">
<tr id="row3" style="display: none">

I guess a js function would be able to display the 3 hidden rows - how?

Thanks - John

**jscheuer1** · 09-09-2010, 06:44 AM

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function showRows(){
	var rows = document.getElementById('theTable').rows, i = rows.length - 1;
	for (i; i > -1; --i){
		if(rows[i].className === 'hidden'){
			rows[i].style.display = '';
		}
	}
}
</script>
</head>
<body>
<table id="theTable">
<tr><td>1st seen</td></tr>
<tr><td>2nd seen</td></tr>
<tr class="hidden" style="display: none;"><td>3rd unseen</td></tr>
<tr class="hidden" style="display: none;"><td>4rth unseen</td></tr>
<tr class="hidden" style="display: none;"><td>5th unseen</td></tr>
</table>
<input type="button" onclick="showRows();" value="Show Rows">
</body>
</html>

Thread: show table rows (new to js)

Thread Tools

Search Thread

show table rows (new to js)

Bookmarks

Bookmarks

Posting Permissions