jQuery Get Row Number & Column Number Examples

In jQuery, Tips and Tricks by June 8th, 2012

1227 Views 2 Comments

If you are trying to get row number or toiling to get column number using jQuery, then I have the answers for you. In this article, I am going to show you how to get row index and column index using jQuery with examples.

How to use jQuery to Get Row Number & Column Number – Examples

I am using a table for demo and I am going to get the row number and column index / number, when a cell is clicked upon. Here is the HTML source code common to all the following examples:

Example 1: Get Row Index and Get Column Index when cell is clicked

When you run the above code and click on any cell, it will give you the index of that cell. So for example, if you click on 3rd Row 3rd Column cell, it will show you the result as:

Row # 2 Column # 2

No, the code is not buggy. Remember that index starts from 0 (similar to arrays index). So if you click on 1st Row 1st Column cell,  it will show you the result as:

Row # 0 Column # 0

If you don’t want to be bothered with the indexes and would rather have it give you the perfect row and column numbers, then use the code below:

Example 2: Get Row Number and Get Column Number when cell is clicked

In the above code, all we are doing is adding 1 to the index of the row number and cell number to give you the exact numbers. So if your replace old jQuery code with the code above and run the entire page and click on 3rd Row 3rd Column cell, the revised result will be:

Row # 3 Column # 3

So if you would like to get row index and column index without any manipulations, then use the code given in Example 1. If you would rather get the row number and column numbers in easy to understand format without having to mentally add 1 to get the correct row number and column number, then use the code in Example 2.

Example 3: Get Row Index and Get Column Index and Numbers when cell is clicked

The above code shown in Example 3 is an alternate code for Example 1 & Example 2. You can use any of the codes as you see fit.

Your Turn!

Do you know of any other ways to get row index, column index, row number & column number using jQuery? Feel free to share your thoughts.

2 Comments on jQuery Get Row Number & Column Number Examples

  1. 1

    Thanks for examples.They are helpful.Can this examples in my projects for free.

Share your thoughts, comment below now!

*

*