Jquery Selectors

In my one of the projects One of the client required some sort of report about his system, for that reports I have generated the html table in code behind file , from server side.Here is the format of the report.

You can see from the above report that each alternative color is give to each of the row in the table. While designing the above table I have to give the different css class to the each cell depending upon the location of the cell in the row, I have different css class for the first cell of each of the row as the style properties such as the top, bottom, left and right of the first cell of each row is different from the cell next to it. So I have 3 css class for the cell one for the very first cell of the table and one for the first cell of the every row and the one for the remaining cells in the table. Let us start with the example of how to achieve this functionality with the use of jquery selectors.

:even and :odd Selectors:

The even and the odd selectors are very handy selectors of the jquery. As there name is self describing even selector is used to select the even elements and the odd selector select the odd elements when used. The :odd and :even selectors use JavaScript's native zero-based numbering. Therefore, the first row counts as 0 (even) and the second row counts as 1 (odd), and so on.

$('#tblMainTable tr:odd').addClass('alternativeRowColor');

In the above statement I have provided the name of the table which is tblMainTable so that the alternative row color is applied only to the table of the given name, this is handy when you have multiple table in you aspx form and you want to apply the alternative row color to a given table. If you omit the name of the table then it will apply the alternative row color to the all the table in the web form or aspx page. If we omit the table name and the web form has multiple table then the alternative row color is applied in the following order. If the last row of the first table has a white background, then first row in the next table would have the "alternate" background. Same is the use of the even select which will select the even rows or elements, starting from the 0(zero) index and then 2 and so on.

:first and :last Selectors:

By using the odd and the even select I have assign the alternative color to the table rows now I have to assign the css classes to the table cell based on the location of the cell in the table and row. Here is the statement or jquery code which is used to assign the css classes to the first row of the table , you can say that header row of the table, I have not used thead part of the html table. For the very first cell of the table I have set the top, bottom, left and right border and set the style and the color of the border as it is the fist cell so it include all four side border. By using the statement below I have give the name of the table and then select the first row of the table and then the first cell of that row.The first selector will matches the first selected element and the last selector will matchs the last selected element.

$('#tblMainTable tr:first td:first').addClass('tdBorderTopLeftMostCell')
$('#tblMainTable tr:first td:first').nextAll().addClass('tdBorderTopMostCell');

As the first cell of the table is set the border on all side so the next cell will have no border on lef side but that will contain the border on remaining three sides. So I have to set different css class for the remaining header cell of the table. For this purpose I have apply same css class for the remaining cells and need to select the remaining cells of the table. For this purpose I have repeat the previous statement and after that function call I have call the nextAll function which will return all sibling cells after the first cell. The nextAll find all sibling elements after the current element. Like the nextAll jquery has the prevAll which will select the previous elements.The last selector will select the last element.
For the rest of the rows as they are same in nature, like the first cell of each row has the left, bottom and the right side border and the remaining cell in same row has only the bottom and right side borders, so you can say that they have same in nature. Here is the small piece of the jquery code which will set the border to the first and the remaining cell of the rows.

$('#tblMainTable tr').each(function(){
$('td:first', this).addClass('tdBorderLeftMostCell');
$('td:first', this).nextAll().addClass('tdMiddleCells');
});

In the above code I have used the each function of the jquery to iterate through the every row of the table and then using that row by using this key word apply the css class to the first and the remaining cell of the current row. As in this post I am discussing the some of the selector of the jquery so I will not discuss the each function of the jquery, will discuss it in other post.

You can download the source code from here.

All and any comments / bugs / suggestions are welcomed!