•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 427,100 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,226 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 4317 | Replies: 3
 |
•
•
Join Date: Jun 2008
Posts: 1
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
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
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
•
•
Join Date: Sep 2005
Posts: 689
Reputation:
Rep Power: 6
Solved Threads: 41
Practically a Master Poster
•
•
•
•
Originally Posted by 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
You'll need to use the DOM methods:
http://www.howtocreate.co.uk/tutoria...ript/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..
www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
•
•
Join Date: Jun 2006
Location: India
Posts: 6,863
Reputation: 
Rep Power: 23
Solved Threads: 344
A typo there:
should be:
if (expandable.style.display = 'none') {if (expandable.style.display == 'none') { I don't accept change. I don't deserve to live.
Happiness corrupts people.
Failing to value the lives of others cheapens your own.
Happiness corrupts people.
Failing to value the lives of others cheapens your own.
•
•
Join Date: Sep 2005
Posts: 689
Reputation:
Rep Power: 6
Solved Threads: 41
Practically a Master Poster
•
•
•
•
Originally Posted by ~s.o.s~
A typo there:
should be:if (expandable.style.display = 'none') {
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> Last edited by digital-ether : Jun 6th, 2008 at 11:05 am.
www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
|
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
- Collapsible table sorting problem (JavaScript / DHTML / AJAX)
- javascript works in IE but not working in firefox (JavaScript / DHTML / AJAX)
- Reference to undefined property FIREFOX (JavaScript / DHTML / AJAX)
- can anyone make this tree table sort correctly? (JavaScript / DHTML / AJAX)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: need help with + value
- Next Thread: AJAX rss not working in firefox
