Member Avatar for l_kris06

Hi All,

I have a PHP application, that displays information in a table format, each rows contains specifica information which are dynamically fetched from the MySQL database. i am looking for a way to make these individual rows display more information, meaning i want to implement a functionality where in when i click on a row it expands to show more information, and when i click on the row again, it should collapse. I knw its possible in Javascript, but am very new to it, and i dont knw how to go about doing it. I would really appreiciate if somebody could give help me out. Thanks.

~Kris

  • 3 Contributors
  • 3 Replies
  • 2K Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by digital-ether
Member Avatar for digital-ether

Hi All,

I have a PHP application, that displays information in a table format, each rows contains specifica information which are dynamically fetched from the MySQL database. i am looking for a way to make these individual rows display more information, meaning i want to implement a functionality where in when i click on a row it expands to show more information, and when i click on the row again, it should collapse. I knw its possible in Javascript, but am very new to it, and i dont knw how to go about doing it. I would really appreiciate if somebody could give help me out. Thanks.

~Kris

You'll need to use the DOM methods:
http://www.howtocreate.co.uk/tutorials/javascript/dombasics

The simplest thing to do is to have the markup in the HTML but hide it using the style property or CSS. Then to expand it, just display it and vise versa.

eg:

<a href="#" id="expander">Expand Me</a>
<div id="expandable" style="display:none;">This is some text that is hidden</div>

Then you have the JS:

// get a reference to the expander element
var expander = document.getElementById('expander');
// set an event handler to handle when the expander link is clicked
expandar.onclick = function() {
  // get a reference to the expandable div
  var expandable = document.getElementById('expandable');
  // display it if it isn't visible, or hide it 
  if (expandable.style.display = 'none') {
    expandable.style.display = 'block';
  } else {
    expandable.style.display = 'none';
  }
};

You can do the same for table rows. You just need to select them with methods such as document.getElementById() or document.getElementsByTagName() etc,. then change their style properties or an attribute such as "class" in order to apply a different CSS rule to the element. This gives the effect of the expand collapse etc..

Member Avatar for ~s.o.s~

A typo there:

if (expandable.style.display = 'none') {

should be:

if (expandable.style.display == 'none') {
Member Avatar for digital-ether

A typo there:

if (expandable.style.display = 'none') {

should be:

if (expandable.style.display == 'none') {

Thanks for spotting that.

I didn't mention in my post, but the javascript should be executed after the DOM is loaded. This is normally implied if you're familiar with DOM scripting but it I can remember times when I'd spend hours trying to figure out what was going wrong and the case was that the DOM was not fully loaded. So here is what a full working example would look like.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Expand a Table via DOM and Style property</title>
		<script type="text/javascript">
			window.onload = function() {
				var table = document.getElementById('expandable_table');
				if (table) {
					var trs = table.getElementsByTagName('tr');
					for(var i = 0; i < trs.length; i++) {
						var a = trs[i].getElementsByTagName('td')[0].getElementsByTagName('a')[0];
						a.onclick = function() {
							var span = this.parentNode.getElementsByTagName('span')[0];
							span.style.display = span.style.display == 'none' ? 'block' : 'none';
							this.firstChild.nodeValue = span.style.display == 'none' ? 'More' : 'Less';
						};
					}
				}
			};
		</script>
	</head>
	<body>
		
		<h2>Expandable Table</h2>
		<table id="expandable_table">
			<tbody>
				<tr><td>TD 1 <a href="#">More</a><span style="display:none;">TD 1 Extended Description</span></td></tr>
				<tr><td>TD 2 <a href="#">More</a><span style="display:none;">TD 2 Extended Description</span></td></tr>
				<tr><td>TD 3 <a href="#">More</a><span style="display:none;">TD 3 Extended Description</span></td></tr>
				<tr><td>TD 4 <a href="#">More</a><span style="display:none;">TD 4 Extended Description</span></td></tr>
			</tbody>
		</table>
		
	</body>
</html>
commented: The kind of effort put by you in helping out beginners is praiseworthy. +22
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.