IT MANAGEMENT
CIO Update
Datamation
eSecurity Planet
ITSMWatch
Intranet Journal
IT Career Planet
Project Manager Planet
Semantic Web
NETWORKING
EnterpriseNetworkingPlanet
InstantMessagingPlanet
EnterpriseStorageForum
PracticallyNetworked
WEB DEVELOPMENT
HTML Goodies
Javascripts.com
HARDWARE & SYSTEMS
EarthWeb Hardware
SysOpt
Virtual Dr.
WorkstationPlanet
SOFTWARE DEVELOPMENT
CodeGuru
Developer
jGuru.com
JARS
Gamelan
EARTHWEBNEWS.COM
Business
Developer
Ecommerce
Enterprise
Networking
Security
Special Reports
Storage
Opinion
Mobility
xSP
Stats
IT MANAGEMENT
NETWORKING
WEB DEVELOPMENT
HARDWARE & SYSTEMS
SOFTWARE DEVELOPMENT
IT NEWS
Events
Jobs
Premium Services
Media Kit
Network Map
E-mail Offers
Vendor Solutions
Webcasts
subjects:
HTML
Javascript
Add a Javascript
Background
Banners
Business
Cookies
Forms
Games
Image
Mathematics
Messages
Multimedia
Music
Navigation
Security
Sound
Statistics
Timedate
Utilities
Technology Jobs
Search EarthWeb Network
internet.commerce
Be a Commerce Partner
Web Development
:
JavaScripts
:
Utilities
Find a Javascript
:
FREE Tech Newsletters
Instant Messaging Planet HTML
CIO Update
CodeGuru Update
Enterprise Networking Planet
Practically Networked HTML
Enterprise Storage Forum HTML
Optically Networked HTML
Intranet Journal Update
Datamation IT Management Careers
Datamation IT Management Update
Developer.com Update
Gamelan Java Update
Goodies to Go
Javascript Weekly HTML
JARS Java Update
OpenSource Update
SysOpt Tech Notes
Grid Computing Planet HTML
E-Security Planet HTML
Virtual Dr. Text
Source code for FlexiGrid:
<html> <head> <style> TD { PADDING-LEFT: 5px; FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: verdana, arial, 'Microsoft Sans Serif', helvetica, sans-serif } </style> <script language=javascript> /* Tree View Grid Properties & Functions */ var plusImage = "plus1.gif"; var minusImage = "minus1.gif"; var imageTagPrefix = "img"; var nodeSeparator = "."; var n = 1; /* Function to collapse a Node Function will be called Recursively till the Last Child of the Node */ function Collapse(Node) { /* Get n'th child of Node <n starts from 1 till the last child>*/ objChildNode = document.getElementById(Node + nodeSeparator + n); /* Get image object of Node */ objImg = document.getElementById(imageTagPrefix + nodeSeparator + Node); /* Check if Child exists. If does not exist then Reset n = 1 & exit function & */ if(objChildNode != null) { /* Toggle the Child Status i.e. if visible then make it invisible & vis-versa */ if (objChildNode.style.display == "") { /* Close all the Childs, Sub-Childs and so on of the Node*/ if (objImg != null)objImg.src = plusImage; closeAllChilds(Node) return; }else { objChildNode.style.display = ""; if (objImg != null)objImg.src = minusImage; } /* Call Collapse for the Next Child be increamenting n*/ n = n + 1; Collapse(Node); }else n = 1; } /*if p_direction = 0 then Close else Open*/ function ExplicitCollapse(Node,p_direction) { objChildNode = document.getElementById(Node + nodeSeparator + n); objImg = document.getElementById(imageTagPrefix + nodeSeparator + Node); if(objChildNode != null) { if (p_direction == "0") { objChildNode.style.display = "none"; if (objImg != null)objImg.src = plusImage; if(!closeAllChilds(objChildNode.id)) return false; }else { objChildNode.style.display = ""; if (objImg != null)objImg.src = minusImage; } n = n + 1; ExplicitCollapse(Node,p_direction); }else n = 1; } /* Function to close all the childs of a Node As Each Child Node ID contains its Parent Node ID, Close all the rows having the Node ID as a prefix in their IDs. */ function closeAllChilds(nNode) { var tempNode,objTempNode,objNode,tempImg,objBody; objNode= document.getElementById(nNode); /* Get the Parent Element of Node ie. the Table Object */ objTable = objNode.parentElement; var tagNm = objTable.tagName; /* Get the Parent Element is not a Table then exit function */ if(tagNm.toUpperCase() == "TBODY") { /* For each TR of the Table*/ for(i=0;i<objTable.rows.length;i++) { /* Get the ID of the TR i.e. Node ID */ tempNode = objTable.rows[i].id; /* If the ID of the TR contains nNode then make the TR invisible*/ if (tempNode != nNode) { if(tempNode.indexOf(nNode) >= 0) { objTempNode = document.getElementById(tempNode); tempImg = document.getElementById(imageTagPrefix + nodeSeparator + tempNode); if (tempImg != null)tempImg.src = plusImage; objTempNode.style.display = "none"; } } } }else { alert("Table Tag not found"); return false; } return true; } /* Function to keep a Node open onLoad This function also opens up the corresponding Parent Nodes of that perticular Node */ function OpenNode(strNode,p_direction) { var objNode; var arrNode = strNode.split(nodeSeparator); var str = ""; for(i=0;i<arrNode.length;i++){ if(str == "") { str = arrNode[i]; }else { str = str + nodeSeparator + arrNode[i]; } objNode = document.getElementById(str); if (objNode != null) { if (p_direction == "1") { ExplicitCollapse(str,p_direction); }else { Collapse(str); } } } } </script> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor=#f1f0e9> <BR><BR> <h3>Demo</h3> <TABLE cellSpacing=1 cellPadding=1 width="100%" border=0 bgColor="#000000"> <tr id="Book" bgColor="#aaaaaa" onDblClick="Collapse(this.id)"> <td width="20%">Group</td> <td width="20%">Sub Group</td> <td width="20%">Available Books</td> <td width="20%">Code</td> <td width="20%">Price</td> </tr> <tr bgColor="#cdcdcd" id="Book.1" title="Book.1" onDblClick="Collapse(this.id)" style="DISPLAY: none"> <td><IMG id=img.Book.1 style="CURSOR: hand" onclick="Collapse('Book.1')" height =9 src="plus1.gif" width=9 > <b>MICROSOFT</b></td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr bgColor="#ededed" id="Book.1.1" title="Book.1.1" onDblClick="Collapse(this.id)" style="DISPLAY: none"> <td><IMG id=img.Book.1.1 style="CURSOR: hand" onclick="Collapse('Book.1.1')" height =9 src="plus1.gif" width=9 ></td> <td>Visual Basic</td> <td> </td> <td> </td> <td> </td> </tr> <tr bgColor="#ffffff" id="Book.1.1.1" title="Book.1.1.1" style="DISPLAY: none"> <td> </td> <td> </td> <td>Programming Microsoft VB 6.0</td> <td><input type="txtStart001210"></td> <td><input type="txtEnd001210"></td> </tr> <tr bgColor="#ffffff" id="Book.1.1.2" title="Book.1.1.2" style="DISPLAY: none"> <td> </td> <td> </td> <td>VB 6.0 from the Ground Up </td> <td><input type="txtStart001212"></td> <td><input type="txtEnd001212"></td> </tr> <tr bgColor="#ffffff" id="Book.1.1.3" title="Book.1.1.3" style="DISPLAY: none"> <td> </td> <td> </td> <td>Database Access With VB 6</td> <td><input type="txtStart00121"></td> <td><input type="txtEnd00121"></td> </tr> <tr bgColor="#ededed" id="Book.1.2" title="Book.1.2" onDblClick="Collapse(this.id)" style="DISPLAY: none"> <td><IMG id=img.Book.1.2 style="CURSOR: hand" onclick="Collapse('Book.1.2')" height =9 src="plus1.gif" width=9 ></td> <td>ASP</td> <td> </td> <td> </td> <td> </td> </tr> <tr bgColor="#ffffff" id="Book.1.2.1" title="Book.1.2.1" style="DISPLAY: none"> <td> </td> <td> </td> <td>Programming in ASP 3.0</td> <td><input type="txtStart001310"></td> <td><input type="txtEnd001310"></td> </tr> <tr bgColor="#ffffff" id="Book.1.2.2" title="Book.1.2.2" style="DISPLAY: none"> <td> </td> <td> </td> <td>Database Access With ASP</td> <td><input type="txtStart00131"></td> <td><input type="txtEnd00131"></td> </tr> <tr bgColor="#ededed" id="Book.1.3" title="Book.1.3" onDblClick="Collapse(this.id)" style="DISPLAY: none"> <td><IMG id=img.Book.1.3 style="CURSOR: hand" onclick="Collapse('Book.1.3')" height =9 src="plus1.gif" width=9 ></td> <td>Visual C++</td> <td> </td> <td> </td> <td> </td> </tr> <tr bgColor="#ffffff" id="Book.1.3.1" title="Book.1.3.1" style="DISPLAY: none"> <td> </td> <td> </td> <td>Programming in Visual C ++</td> <td><input type="txtStart00143"></td> <td><input type="txtEnd00143"></td> </tr> <tr bgColor="#ededed" id="Book.1.4" title="Book.1.4" onDblClick="Collapse(this.id)" style="DISPLAY: none"> <td> </td> <td>ASP.NET</td> <td> </td> <td> </td> <td> </td> </tr> <tr bgColor="#ededed" id="Book.1.5" title="Book.1.5" onDblClick="Collapse(this.id)" style="DISPLAY: none"> <td> </td> <td>C#</td> <td> </td> <td> </td> <td> </td> </tr> <tr bgColor="#cdcdcd" id="Book.2" title="Book.2" onDblClick="Collapse(this.id)" style="DISPLAY: none"> <td><IMG id=img.Book.2 style="CURSOR: hand" onclick="Collapse('Book.2')" height =9 src="plus1.gif" width=9 > <b>JAVA</b> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr bgColor="#ededed" id="Book.2.1" title="Book.2.1" onDblClick="Collapse(this.id)" style="DISPLAY: none"> <td><IMG id=img.Book.2.1 style="CURSOR: hand" onclick="Collapse('Book.2.1')" height =9 src="plus1.gif" width=9 ></td> <td>JSP</td> <td> </td> <td> </td> <td> </td> </tr> <tr bgColor="#ffffff" id="Book.2.1.1" title="Book.2.1.1" style="DISPLAY: none"> <td> </td> <td> </td> <td>Programming in JSP</td> <td><input type="txtStart002123"></td> <td><input type="txtEnd002123"></td> </tr> <tr bgColor="#ffffff" id="Book.2.1.2" title="Book.2.1.2" style="DISPLAY: none"> <td> </td> <td> </td> <td>JSP From Scratch</td> <td><input type="txtStart0021210"></td> <td><input type="txtEnd0021210"></td> </tr> <tr bgColor="#ffffff" id="Book.2.1.3" title="Book.2.1.3" style="DISPLAY: none"> <td> </td> <td> </td> <td>Core JSP</td> <td><input type="txtStart002121"></td> <td><input type="txtEnd002121"></td> </tr> <tr bgColor="#ffffff" id="Book.2.1.4" title="Book.2.1.4" style="DISPLAY: none"> <td> </td> <td> </td> <td>Database Access With JSP</td> <td><input type="txtStart0021212"></td> <td><input type="txtEnd0021212"></td> </tr> <tr bgColor="#ededed" id="Book.2.2" title="Book.2.2" onDblClick="Collapse(this.id)" style="DISPLAY: none"> <td><IMG id=img.Book.2.2 style="CURSOR: hand" onclick="Collapse('Book.2.2')" height =9 src="plus1.gif" width=9 ></td> <td>J2EE</td> <td> </td> <td> </td> <td> </td> </tr> <tr bgColor="#ffffff" id="Book.2.2.1" title="Book.2.2.1" style="DISPLAY: none"> <td> </td> <td> </td> <td>EJB Design Patterns</td> <td><input type="txtStart002223"></td> <td><input type="txtEnd002223"></td> </tr> <tr bgColor="#ffffff" id="Book.2.2.2" title="Book.2.2.2" style="DISPLAY: none"> <td> </td> <td> </td> <td>Web Services Using Java</td> <td><input type="txtStart0022210"></td> <td><input type="txtEnd0022210"></td> </tr> <tr bgColor="#ffffff" id="Book.2.2.3" title="Book.2.2.3" style="DISPLAY: none"> <td> </td> <td> </td> <td>Java Language Guide</td> <td><input type="txtStart002221"></td> <td><input type="txtEnd002221"></td> </tr> <tr bgColor="#ffffff" id="Book.2.2.4" title="Book.2.2.4" style="DISPLAY: none"> <td> </td> <td> </td> <td>Thinking in Java</td> <td><input type="txtStart0022212"></td> <td><input type="txtEnd0022212"></td> </tr> <tr bgColor="#ffffff" id="Book.2.2.5" title="Book.2.2.5" style="DISPLAY: none"> <td> </td> <td> </td> <td>Programming Jakarta Struts</td> <td><input type="txtStart002227"></td> <td><input type="txtEnd002227"></td> </tr> <tr bgColor="#cdcdcd" id="Book.3" title="Book.3" onDblClick="Collapse(this.id)" style="DISPLAY: none"> <td><IMG id=img.Book.3 style="CURSOR: hand" onclick="Collapse('Book.3')" height =9 src="plus1.gif" width=9 > <b>IBM</b></td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr bgColor="#ededed" id="Book.3.1" title="Book.3.1" onDblClick="Collapse(this.id)" style="DISPLAY: none"> <td><IMG id=img.Book.3.1 style="CURSOR: hand" onclick="Collapse('Book.3.1')" height =9 src="plus1.gif" width=9 ></td> <td>AS 400</td> <td> </td> <td> </td> <td> </td> </tr> <tr bgColor="#ffffff" id="Book.3.1.1" title="Book.3.1.1" style="DISPLAY: none"> <td> </td> <td> </td> <td>AS/400 Language Guide</td> <td><input type="txtStart010233"></td> <td><input type="txtEnd010233"></td> </tr> <TR bgColor="#aaaaaa" onDblClick="Collapse('Book')"> <td colspan=5>Double Click</td> </TR></TABLE> </body> </html> <br> Regards,<BR> Abhijeet Kaulgud<BR> ask5@rediffmail.com <SCRIPT LANGUAGE=javascript> //<!-- // OpenNode('Book'); //--> </SCRIPT>
*JavaScript is a registered trademark of Sun Microsystems, Inc.
Events
Jobs
Premium Services
Media Kit
Network Map
E-mail Offers
Vendor Solutions
Webcasts
