473,324 Members | 2,531 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

Tables with show/hide from XML using XSLT

I have been desperately looking for a treeview-type solution for my
problem
for the past three weeks and have been greatly unsuccessful. I am
totally
new to the world of XSLT and I *don't know* JavaScript. Still, I have
managed to get something together, which I am putting across here. Any
help (even pointing me to the place to look) is welcome.

The problem I have is as follows:

I have the following XML -

<?xml version=3D" 1.0" encoding=3D"UTF-8"?>
<Root>
<Table1>
<fld1>0</fld1>
<disc1>
<dfld1>7</dfld1>
<loop3>
<lfld2>170</lfld2>

<loop4><lfld3>45</lfld3></loop4>
</loop3>
<fld3>37</fld3>
</disc1>

<loop1><lfld1>1030</lfld1><lfld1>4574</lfld1><lfld1>1341</lfld1></loop1>
<loop1><lfld1>1031</lfld1>
<loop2>
<disc1><dfld1>7</dfld1>
<loop3><lfld2>170</lfld2>

<loop4><lfld3>40</lfld3></loop4>
</loop3>
<loop3><lfld2>170</lfld2>

<loop4><lfld3>40</lfld3></loop4>
</loop3>
<fld3>1025</fld3>
</disc1>
<disc2><dfld1>7</dfld1>
<loop3><lfld2>170</lfld2>

<loop4><lfld3>40</lfld3></loop4>
</loop3>
<loop3><lfld2>170</lfld2>

<loop4><lfld3>40</lfld3></loop4>

<loop4><lfld3>50</lfld3></loop4>

<loop4><lfld3>60</lfld3></loop4>
</loop3>
<fld3>1025</fld3>
</disc2>
</loop2>
<fld10>1024</fld10>
</loop1>
</Table1>
</Root>

and I require an XSLT to produce an HTML which would do the following:
(I will put in (-) symbols where I want it to expand and collapse. And
yes,
you are right that I want it to collapse to a single row when
collapsed.
(-) Root
(-)table1
fld1 0
(-)disc1 dfld1 0
(-)loop1
ldfld1 10
dfld2 3005
(-)loop1
ldfld1 238
(-) loop2
ldfld2 3847
ldfld2 472
and so on...

when in collapsed state the above should look like
first look : (+) Root

second look : (-) Root
(+) table1
(+) table2
(+) table3

next look: (-) Root
(-) table1
fld1 0
(+) disc1
fld2 34765
(+) table2
(+) table3

and so on...

The XSLT I have put together as of now is:

<?xml version=3D"1.0"?>
<xsl:stylesheet xmlns:xsl=3D" http://www.w3.org/1999/XSL/Transform"
version=
=3D"
1.0">
<xsl:template match=3D"/Root">
<html>
<head>
<meta http-equiv=3D"Content-Type" content=3D"text/html;
charset=3DUTF-8">
<script language=3D"JavaScript" src=3D"CollapsibleRows.js"> </script>
<style type=3D"text/css">
//
body {
font-family:arial, sans-serif;
font-size:76%;
}
/**/
</style>
</meta>
<title>Converting XML to Table</title>
</head>
<body>
<table class=3D"collapsible" border=3D"1" cellpadding=3D"0"
cellspacing=
=3D"0"
width=3D"500">
<xsl:apply-templates/>
</table>
</body>
</html>
</xsl:template>
<xsl:template match=3D"table">
<td width=3D"500">
<xsl:value-of select=3D"@name"/>
</td>
<xsl:apply-templates/>
</xsl:template>
<xsl:template match=3D"tag">
<td>
<xsl:value-of select=3D"@field"/>
<br/>
<xsl:value-of select=3D"@value"/>
</td>
<xsl:apply-templates/>
</xsl:template>
<xsl:template match=3D"disc">
<tr>
<td>
<table class=3D"collapsible" border=3D"1" width=3D"100%"
cellpadding=3D"=
0"
cellspacing=3D"0">
<td>
<xsl:value-of select=3D"@name"/>
</td>
<xsl:apply-templates/>
</table>
</td>
</tr>
</xsl:template>
<xsl:template match=3D"Loop">
<tr>
<td>
<table class=3D"collapsible" border=3D"1" width=3D"100%"
cellpadding=3D"=
0"
cellspacing=3D"0">
<td>
<xsl:value-of select=3D"@name"/>
</td>
<xsl:apply-templates/>
</table>
</td>
</tr>
</xsl:template>
</xsl:stylesheet>

and the Javascript I am using is:
var W3CDOM =3D (document.createElement &&
document.getElementsByTagName);

addEvent(window, 'load', initCollapsingRows);

// This is the path to the images relative to the HTML file
// Ex. If your HTML file is at /files/Index.html
// and your JavaScript and images are in /files/collapsible/
// then the path here would be "collapsible/"
var pathToImages =3D "";

function addEvent(obj, eventType,fn, useCapture)
{
if (obj.addEventListener) {
obj.addEventListener(eventType, fn, useCapture);
return true;
} else {
if (obj.attachEvent ) {
var r =3D obj.attachEvent ("on"+eventType, fn);
return r;
}
}
}

// this function is needed to work around
// a bug in IE related to element attributes
function hasClass(obj) {
var result =3D false;
if (obj.getAttributeNode("class") !=3D null) {
result =3D obj.getAttributeNode("class").value;
}
return result;
}

function toggleVisibility() {

var theImage =3D this;
var theRowName =3D this.id.replace('_image', '_comment');
var theRow =3D document.getElementById(theRowName);

if (theRow.style.display=3D=3D"none") {
theRow.style.display =3D "";
theImage.src =3D pathToImages + "Collapse.gif";
} else {
theRow.style.display =3D "none";
theImage.src =3D pathToImages + " Expand.gif ";
}
}

function insertExtraCells(theTable) {

// get reference to all of the tbody's, thead's, and tfoot's
var tbodies =3D theTable.getElementsByTagName('tbody');
var theads =3D theTable.getElementsByTagName('thead');
var tfoots =3D theTable.getElementsByTagName ('tfoot');

insertInto(theads, 'th');
insertInto(tbodies, 'td');
insertInto(tfoots, 'td');

}

function insertInto(parentCollections, typeOfCell) {
// loop through all of the parent collections passed in
for (var m =3D 0; m < parentCollections.length; m++) {

// get all of the rows for each collection
var trs =3D parentCollections[m].getElementsByTagName('tr');

// loop through each of the rows
for (i=3D0;i<trs.length;i++) {
// create a new cell
var theNewCell =3D document.createElement(typeOfCell);

// insert the new cell before the first child
var cells =3D trs[i].getElementsByTagName(typeOfCell);
trs[i].insertBefore(theNewCell, cells[0]);
}
}
}

function initCollapsingRows()
{
if (!W3CDOM) return;

// the flag we'll use to keep track of
// whether the current row is odd or even
var even =3D true;

// get a list of all the tables
var tables =3D document.getElementsByTagName('table');

// if there aren't any tables exit
if (tables.length=3D=3D0) { return; }

// and iterate through them...
for (var k =3D 0; k < tables.length; k++) {

// if the table has a class
if (hasClass(tables[k])) {

// if that class is "collapsible"
if
(tables[k].getAttributeNode('class').value.indexOf('collapsi ble')!=3D-1)
{

// since we are adding a graphic for expanding and
collapsing
// the rows in the first column of the table, we need to
ad=
d

// an extra column everywhere
insertExtraCells(tables[k]);

var tbodies =3D tables[k].getElementsByTagName('tbody');
// iterate through the bodies...
for (var h =3D 0; h < tbodies.length; h++) {

// find all the &lt;tr&gt; elements...
var trs =3D tbodies[h].getElementsByTagName('tr');

// ... and iterate through them
for (var i =3D 0; i < trs.length; i++) {

if (i%2=3D=3D0) {
// Get a reference to the TD's
var td =3D
trs[i].getElementsByTagName('td')[0]=
;

// Assign a related unique ID to the next
row
where the comment is
// This is the row that will be expanded and

collapsed
var theRowName =3D "row_" + i + "_comment";
trs[i+1].id =3D theRowName;
trs[i+1].style.display =3D "none";

// Create the new image object
var theNewImage =3D
document.createElement('img=
');

var theNewImageName =3D "row_" + i +
"_image";
theNewImage.id =3D theNewImageName;
theNewImage.src =3D pathToImages + "
Expand.gif=
";
theNewImage.width =3D 13;
theNewImage.height =3D 13;
theNewImage.style.margin =3D "5px";
theNewImage.style.cursor =3D "pointer";

// Add "onclick" event to the image that
expand=
s
and collapses the next row
theNewImage.onclick =3D toggleVisibility;

// Insert an image into the document tree
insid=
e
the first TD
td.appendChild(theNewImage);
td.style.width=3D"1%"

// Skip the collapsbile row
i++;
}
}
}
}
}
// Reset "even" for the next table
even =3D true;
} // End for loop
}

Could you let me know if it is doable (at least if I change the XML
format
to an attribute level one like - <tag f="fieldname" v="value"/>). I am
really desperate for an answer and have searched the net innumerable
times and written to almost all the mailing lists without any success.

Thanks a lot for taking time out for this.

Apr 21 '06 #1
2 7346
Scamjunk wrote:
I have been desperately looking for a treeview-type solution for my
problem
for the past three weeks and have been greatly unsuccessful. I am
totally
new to the world of XSLT and I *don't know* JavaScript. Still, I have
managed to get something together, which I am putting across here. Any
help (even pointing me to the place to look) is welcome.

The problem I have is as follows:

[details snipped]


Are you sure that your XML is valid? Your first line looks odd to me,
you don't have a doctype declaration, there's no namespace declaration,
and two of your elements have names that aren't all in lowercase.

I have no idea if the above is relevant to your problem, since I don't
know anything about using XML!

Anyway, I don't know that this ng is truly appropriate for your
problem. What about the following, which seems like a good bet for
getting useful advice on XSLTs:
comp.text.xml
--
AGw.

Apr 21 '06 #2
I don't know where the '3D's came in from. Maybe some problem with the
display part of google groups. I sure didn't put them in. The point is
that I generate my XMLs through DOM and hence, I didn't feel the
necessity to put in namespaces. and then want to display them in the
format specified using XSLT. I have come to understand that it is
doable. It is just that I don't know javascript to do it. Can anybody
at least point me to the right place to look for a solution ?

Scam.

Apr 24 '06 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Samir | last post by:
<table width="225" border="0"> <tr> <td width="10" id="MyCell1" onclick="ShowHide('MyRow1','MyCell1')"><img src="images/plus3.gif"></td> <td width="205">blahasdfadfadfasd</strong></a></div></td>...
0
by: Mike Gorgone | last post by:
Hi All, I'm currently trying to show a datagrid with a parent and child table realtionship. I've got the expansion icon (+) in the row headers and when I click on it I see the link to the child...
5
by: Dautkhanov | last post by:
Hello all ! I have my own library for web-design building - active forms, lists. I am going to build tabbing component. The complexity in this process is that all web forms uniformed and are...
6
by: Shiller | last post by:
I want my application to create a new database/tables when run for the first time. I have created a stored procedure to create the new database named "budget". When I run the stored procedure, it...
25
by: bubbles | last post by:
Using Access 2003 front-end, with SQL Server 2005 backend. I need to make the front-end application automatically refresh the linked SQL Server tables. New tables will be added dynamically in...
11
by: shriil | last post by:
Hi I have this database that calculates and stores the incentive amount earned by employees of a particular department. Each record is entered by entering the Date, Shift (morn, eve, or night)...
7
by: cefrancke | last post by:
I have a few tables with sensitive user information (passwords, etc.) and I would like to prevent someone from opening a blank database and importing those tables. Is there a way to "hide" or...
14
by: Patrick A | last post by:
All, I have an Access DB. On a nightly basis, I want to look at an Other DB (not Access, but SQL) and: + Add any new records from Other.Clients into Access.Clients Is this something I...
6
by: jsacrey | last post by:
Hey everybody, got a secnario for ya that I need a bit of help with. Access 97 using linked tables from an SQL Server 2000 machine. I've created a simple query using two tables joined by one...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.