I have an asp.net web application. The application reads data from an xml. The xml has a reference to a xslt file which takes care of the table design and alignment. I add data to the xml in a dynamic manner.
I want every alternate row of the table to have a color (say grey) for readability. I believe it can be done in xslt itself using the line of code
<xsl:if test="(position() mod 2 = 0)">
Can someone please tell me how to do it? I have posted my xslt fully below.
<?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="/">
<html>
<head>
<title>VPGate Media Mixer</title>
<meta http-equiv="expires" content="0"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache, must-revalidate"/>
<meta http-equiv="refresh" content="15"></meta>
<script src="/Common/common.js\" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style001.css" />
<link rel="stylesheet" type="text/css" href="Grid.Default.css" />
</head>
<body class="WorkArea">
<div class="divSummaryHeader" id="SummaryHeader">
<h1>Media Mixer - VPGate</h1>
<xsl:for-each select="MMDiagnostics/Conference">
<h1>
Media Mixer - <xsl:value-of select="name"/>
</h1>
</xsl:for-each>
</div>
 
<div class="RadGrid RadGrid_Default" id="SummaryData" style="position:absolute;width:630px;overflow:auto">
<table border="0" class="rgMasterTable rgClipCells" cellspacing="0" cellpadding="0" >
<tr>
<input type="button" class="formEditBtn" id="SubBtn" value="Refresh" onclick="window.location=window.location;"/>
</tr>
<tr>
<td class="rgHeader SummaryTableHdrRow" style="font-weight:bold;" colspan="2">Conference</td>
</tr>
<tr>
<td>
<table border="0" class="rgMasterTable rgClipCells" cellspacing="0" cellpadding="0" >
<tr>
<td class="rgHeader SummaryTableHdrRow" style="font-weight:bold;">Conference Name</td>
<td class="rgHeader SummaryTableHdrRow" style="font-weight:bold;">Conference Id</td>
<td class="rgHeader SummaryTableHdrRow" style="font-weight:bold;">Composite Address</td>
<td class="rgHeader SummaryTableHdrRow" style="font-weight:bold;">Composite Port</td>
<td class="rgHeader SummaryTableHdrRow" style="font-weight:bold;">Composite Ssrc</td>
<td class="rgHeader SummaryTableHdrRow" style="font-weight:bold;">No Of Participants</td>
</tr>
<xsl:for-each select="MediaMixer/Conference">
<!--<xsl:sort select="Name"/>-->
<xsl:if test="(position() mod 2 = 0)">
<tr class="rgAltRow SummaryTableDataRow">
<td valign = "top">
<xsl:value-of select="Name"/>
</td>
<td valign = "top">
<xsl:value-of select="ConfId"/>
</td>
<td valign = "top">
<xsl:value-of select="CompositeAddress"/>
</td>
<td valign = "top">
<xsl:value-of select="CompositePort"/>
</td>
<td valign = "top">
<xsl:value-of select="CompositeSsrc"/>
</td>
<td valign = "top">
<xsl:value-of select="NoOfParticipants"/>
</td>
</tr>
</xsl:if>
<xsl:if test="(position() mod 2 = 1)">
<td bgcolor="#aaaaff">
<tr class="rgAltRow SummaryTableDataRow">
<td valign = "top">
<xsl:value-of select="Name"/>
</td>
<td valign = "top">
<xsl:value-of select="ConfId"/>
</td>
<td valign = "top">
<xsl:value-of select="CompositeAddress"/>
</td>
<td valign = "top">
<xsl:value-of select="CompositePort"/>
</td>
<td valign = "top">
<xsl:value-of select="CompositeSsrc"/>
</td>
<td valign = "top">
<xsl:value-of select="NoOfParticipants"/>
</td>
</tr>
</td>
</xsl:if>
</xsl:for-each>
</table>
</td>
</tr>
</table>
 
<table border="0" class="rgMasterTable rgClipCells" cellspacing="1" cellpadding="1" >
<tr>
<td class="rgHeader SummaryTableHdrRow" style="font-weight:bold;" colspan="2">Participant</td>
</tr>
<tr>
<td>
<table border="0" class="rgMasterTable rgClipCells" cellspacing="0" cellpadding="0" >
<tr>
<td class="rgHeader SummaryTableHdrRow" style="font-weight:bold;">ID 1</td>
<td class="rgHeader SummaryTableHdrRow" style="font-weight:bold;">ID 2</td>
<td class="rgHeader SummaryTableHdrRow" style="font-weight:bold;">Participant Address</td>
<td class="rgHeader SummaryTableHdrRow" style="font-weight:bold;">Participant Listening Port</td>
<td class="rgHeader SummaryTableHdrRow" style="font-weight:bold;">MM Listening Port</td>
<td class="rgHeader SummaryTableHdrRow" style="font-weight:bold;">SSRC From Participant</td>
<td class="rgHeader SummaryTableHdrRow" style="font-weight:bold;">SSRC From MM</td>
</tr>
<xsl:for-each select="MediaMixer/Conference/Participant">
<xsl:if test="(position() mod 2 = 0)">
<tr class="rgAltRow SummaryTableDataRow">
<td valign = "top">
<xsl:value-of select="ID1"/>
</td>
<td valign = "top">
<xsl:value-of select="ID2"/>
</td>
<td valign = "top">
<xsl:value-of select="ParticipantAddress"/>
</td>
<td valign = "top">
<xsl:value-of select="ParticipantListeningPort"/>
</td>
<td valign = "top">
<xsl:value-of select="MMListeningPort"/>
</td>
<td valign = "top">
<xsl:value-of select="SSRCFromParticipant"/>
</td>
<td valign = "top">
<xsl:value-of select="SSRCFromMM"/>
</td>
</tr>
</xsl:if>
<xsl:if test="(position() mod 2 = 1)">
<td bgcolor="#aaaaff">
<tr class="rgAltRow SummaryTableDataRow">
<td valign = "top">
<xsl:value-of select="ID1"/>
</td>
<td valign = "top">
<xsl:value-of select="ID2"/>
</td>
<td valign = "top">
<xsl:value-of select="ParticipantAddress"/>
</td>
<td valign = "top">
<xsl:value-of select="ParticipantListeningPort"/>
</td>
<td valign = "top">
<xsl:value-of select="MMListeningPort"/>
</td>
<td valign = "top">
<xsl:value-of select="SSRCFromParticipant"/>
</td>
<td valign = "top">
<xsl:value-of select="SSRCFromMM"/>
</td>
</tr>
</td>
</xsl:if>
</xsl:for-each>
</table>
</td>
</tr>
</table>
 
<div style="display:none">
<iframe id="frameUpdate" name="frameUpdate" width="100%"></iframe>
</div>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
You’re actually on the right track. Assign numbered css classes and use position() mod 2 to compute which css class to call.
Here’s a demonstration:
HTH.