.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Sandeep Singh
Melody Anderson
Eminent IT

Home >> Articles >> JQuery >> Post New Resource Bookmark and Share   

 Subscribe to Articles

JQuery Basic Selector Part - 1

Posted By:shankey       Posted Date: July 31, 2011    Points: 200    Category: JQuery    URL: http://www.dotnetspark.com  

In this article we will see how to count the number of rows in a table, Whats the property of the table using JQuery Basic Selector and much more

Some examples of selector in jquery.

  •   a - Matches all the link elements.
  •  #BlackWhite - Matches all the elements that have id "BlackWhite".
  •  .alternateClass1 - Matches the entire elements that have the class of ".alternateClass1".
  •  table#BlackWhite  - Matches all the table element that have id as "BlackWhite".
  • table tr.alternateClass1 - Matches all tr element have class of ".alternateClass1" with in table element.

    To study in details lets go through the following example. In the following example we try to get count of black and white row.

    If someone asks you attempt this through JavaScript, then you will just iterate through the table element and maintain the count of black or white row based on the class name.

    But let's have a look at how it is easy to do this through JQuery.

HTML for the GUI.

Row one column one Row one column one
Row two column one Row two column two
Row three column one Row three column two
Row four column one Row four column two
Row five column one Row five column two

CSS for the GUI


jQuery Selectors to achieve our goal


Selector div table#BlackWhite tr.alternateClass2 selects the entire black row following is the function call in which the message and the selector is passed.

Function call getCount('Black row.','div table#BlackWhite tr.alternateClass2');"

Selector div table#BlackWhite tr.alternateClass1 selects the entire black row following is the function call in which the message and the selector is passed.

Function call getCount('White row.','div table#BlackWhite tr.alternateClass1');

JQuery to achieve our goal

Below single line achieve our goal


Javascript functions which encompass the jquery line


Function getCount  accepts two argument first is the color i.e. just to show a message. And second is the selector.

You can also download the sample project from below link

 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend