[FlexiGrid]

Group Sub Group Available Books Code Price
Double Click

Beispiel, wie Tabellen expandiert werden können.

[Code]

[zwischen <HEAD> und </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>

[zwischen <BODY> und </BODY>]

<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>

[Autor]

Abhijeet Kaulgud

[Download]

Kopieren Sie bitte den Code

Copyright © 1998- Nightfire Webworker Archiv Script No: 539