Skip to main content

Alternative row colours in XSL

In the same project as before, my search results are being presented in a table.  The issue here, is that I want to have a different background colour for an alternate for the purpose of easy readability.

Luckily, XSL saves the day with the position() function.  This is really handy for obtaining your current index when in a loop.  Just as with using any other server side language you want to mod 2 the position to identify the alternate row:

<xsl:if test="position() mod 2 ='1'">
    <xsl:attribute name="class">rowA</xsl:attribute>
</xsl:if>


For a quick reminder of the modulus operation (mod): when applying the arithmetic on an even number it, correctly returns 0.  When applying to an uneven number, such as 5, it will return the value 1.  1 denotes that there is a remainder.

The purpose of xsl:attribute is to apply XML/XSL to an attribute of a HTML tag.  In this case I want to apply a CSS style to the table row (tr), to keep separation of design and content in the resulting HTML.





Blogged with Flock

Comments

Popular posts from this blog

Open Source alternatives to Adobe Creative Suite

With the take over of Macromedia by Adobe, they have increased their arsenal of design packages, as well as the price. No-one can do pretty much without the popular package of Photoshop for their images, and Dreamweaver for websites, especially aspiring design students who do not have much money. Nevertheless, open source software has come to save the day. What is open source software? In a nutshell it is free software with its source-code freely available to those who would like to expand or improve on the software. To expand further, anyone who’s tinkered with the source code such as optimisation or additional functionality can resubmit it back to the holders and let others enjoy the fruits of your labour. I have trawled through the World Wide Web to find out how everyone can benefit from Open Source to build up their own studio and compete against Adobe Creative Suite. All this for free, apart from the cost of the Internet. I am planning to have a facility where you can purchase...

Microsoft Bing

It's nice to see the Press taking a much more keen interest in technology and gadgets. So I wasn't that much surprised when the Metro covered the launch of Microsoft Bling. Currently in beta Microsoft is obviously renewing their competition against Google. I've also noticed that Microsoft has recently replaced the Live search with Bing on their MSN page. But after using it, why do I get the impression that it's just copying Google with a more colourful interface?

Javascript form validation

One of the most popular uses of Javascript is when it comes to validating user input on a form. The most hateful way, though, is by not using onsubmit. A number of times I come across code where someone uses an image in place of the submit button and uses the onclick event which will validate then submit the form. Yeauch! Very bad practice! The first thing to do with the form is place the Javascript function in the onsubmit attribute for the form, e.g. <form name="reg" method="post" onsubmit="return validateForm();" The use of return lets the form submit when the function returns true. If the function does not return true (i.e. false) then the form will not submit - as shown below. function validateForm(){ return false; } Getting a reference to the form is the next step. There are a number of ways to do this: document.forms[0] document.forms['reg'] document.getElementById('reg') This will work when id is used on the form Passing an o...