Blog from Saravanan Arumugam

Let us talk about Technologies

Monthly Archives: August 2012

Color alternate rows with different color

Most of us prefer to show a table element with alternate rows showing different background colors.

There has been multiple solutions in the history to do that.

One old way is to apply alternate classes to rows and apply different styles to them. Then ASP.Net form’s grids had property settings for achieving that. There’s a javascript way etc.

I am posting here two simpler and newer ways to do it.


Using CSS3

With CSS 3 doing this is way simple.

    background-color: #eee;

Simple isn’t it.


For the older browsers like IE8, IE7 etc. this may not work. For them, we can use jQuery to do it.

$(“tr:odd”).css(“background-color”, “#eee”);

The code above can do the trick for us.


jQuery validation on hidden form elements

I recently wrote a code where I will have a wizard like page with multiple tabs. Each tab is a Div element, on clicking on a tab, one div will be visible while hiding the other divs, an usual design.

I implemented an unobtrusive validation on the web page, and it all worked well.


After I upgraded my jquery.validation.js, my web page’s validation was not as expected. Then I compared the two versions of jquery.validation.js files (1.8.1 and 1.9).


In the comparison it was evident that by default the jquery validator ignores all the hidden elements in 1.9 version, whereas 1.8 does validate every control in the page, no matter they are visible or invisible.


Of course validating only the visible controls is an useful feature, but not in my case. So I had to override the default value.

I wrote the following code in the page to instruct the validator not to ignore the hidden controls.

<script type="text/javascript" language="javascript">
$.validator.setDefaults({ ignore: [] });

Setting the default has to happen right when we include the scripts on the page. This would not work if we do it after the page load in any control’s event handle.