I am trying to generate webpage that will have combobox with list of projects.
Based on the selection in the combobox xml will be filtered to show only rows corresponding to selected project(s).
What I have right now is xml that refers xsl which generates table and this table is rendered using css
I need some help to figure out how to add combobox and filter data based on selection
Thank you
LogSample.xml
---------------
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="LogSampleTransform.xsl"?>
<Log>
<LogItem>
<level>Trace</level>
<date>05/28/2008 18:17:23</date>
<project>Project1</project>
<method>Method_A</method>
<Msg>Started.</Msg>
</LogItem>
<LogItem>
<level>Trace</level>
<date>05/28/2008 18:17:23</date>
<project>Project1</project>
<method>Method_A</method>
<Msg>Completed.</Msg>
</LogItem>
<LogItem>
<level>Trace</level>
<date>05/28/2008 18:17:23</date>
<project>Project1</project>
<method>Method_B</method>
<Msg>Do something.</Msg>
</LogItem>
<LogItem>
<level>Trace</level>
<date>05/28/2008 18:17:23</date>
<project>Project2</project>
<method>Method_C</method>
<Msg>Started.</Msg>
</LogItem>
<LogItem>
<level>Trace</level>
<date>05/28/2008 18:17:23</date>
<project>Project2</project>
<method>Method_D</method>
<Msg>Started.</Msg>
</LogItem>
<LogItem>
<level>Trace</level>
<date>05/28/2008 18:17:23</date>
<project>Project2</project>
<method>Method_D</method>
<Msg>Completed.</Msg>
</LogItem>
<LogItem>
<level>Trace</level>
<date>05/28/2008 18:17:23</date>
<project>Project2</project>
<method>Method_C</method>
<Msg>Completed.</Msg>
</LogItem>
</Log>
-----------------------------------------------------------
LogSampleTransform.xsl
-----------------------
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="Log">
<html>
<head>
<title>Title</title>
<link type="text/css" rel="stylesheet" href="LogSampleStyle.css"/>
</head>
<body>
<h2>Log</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th align="left">Date</th>
<th align="left">LogLevel</th>
<th align="left">Project</th>
<th align="left">Method</th>
<th align="left">Message</th>
</tr>
<xsl:for-each select="LogItem">
<tr>
<td class="text"><xsl:value-of select="date"/></td>
<td class="text"><xsl:value-of select="level"/></td>
<td class="text"><xsl:value-of select="project"/></td>
<td class="text"><xsl:value-of select="method"/></td>
<td class="text"><xsl:value-of select="Msg"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
----------------------------------------------------------
LogSampleStyle.css
-------------------
table {
border-collapse: collapse;
font-family: "Trebuchet MS", "Lucida Sans Unicode", verdana, lucida, helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
caption {
font-size: 1.4em;
font-stretch: condensed;
font-weight: bold;
padding-bottom: 5px;
text-align: left;
text-transform: uppercase;
}
th, td {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
padding: 0.6em;
vertical-align: 4px;
}
th {
text-align: left;
text-transform: uppercase;
}
thead th, tfoot th, tfoot td {
background-color: #666;
font-size: 1.1em;
}
tbody th {
padding-left: 24px;
}
tbody th, td {
background-color:#eee;
}
tbody tr:hover td, tbody tr:hover th {
background-color: #E5E5CB;
}
tr.odd td, tr.odd th {
background-color: #ddd;
}
tbody a {
color: #ddd;
}
tbody a:visited {
color: #999999;
}
tbody a:hover {
color: #33c;
}
tbody a:active {
color: #33c;
}
tbody td+td+td+td a {
padding-right: 12px;
}
tfoot th {
text-align: right;
}
tfoot th:after {
content: ":";
}
posted 08-14-2008 15:46
