Expand HTML table

Hello experts,
I am generating a table based on a database query result and i want to show only the first 5 results of the table. I want to have a link for expanding the table for showing all the results and then a link for hiding them again.
randomstAsked:
Who is Participating?
 
hieloConnect With a Mentor Commented:
save as hielo.html and try it:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>hielo</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
		<script language="JavaScript" type="text/javascript">
		$(function(){
			
			$("#theTable tr:gt(4)").hide();
			
			$('#toggler').bind('click',function(){
				if( this.innerHTML.indexOf("Show")!=-1 )
				{
					$("#theTable tr:gt(4)").show();
					this.innerHTML="Hide";
				}
				else
				{
					$("#theTable tr:gt(4)").hide();
					this.innerHTML="Show";
				}
			});
			
		});
		</script>

	</head>
	<body>
		<a href="#" id='toggler'>Show</a>
		<table id='theTable'>
			<tr><td>a</td></tr>
			<tr><td>b</td></tr>
			<tr><td>c</td></tr>
			<tr><td>d</td></tr>
			<tr><td>e</td></tr>
			<tr><td>f</td></tr>
			<tr><td>g</td></tr>
			<tr><td>h</td></tr>
			<tr><td>i</td></tr>
			<tr><td>j</td></tr>
			<tr><td>k</td></tr>
		</table>
	</body>
</html>

Open in new window

0
 
exalkoniumCommented:
Are you using jQuery for this? If so, this should get you started on what you need:
$('tr').slice(5).hide();
	$('.expand').click(function() {
		$('tr').show();
	});

/////////////////

<a href="#" class="expand">Expand Table</a>

Open in new window

0
 
exalkoniumCommented:
Haha, I like the way you think, hielo.
0
 
randomstAuthor Commented:
very helpful thanks !
0
All Courses

From novice to tech pro — start learning today.