Table row and column number in jQuery

Question

How do I get the row and column number of the clicked table cell using jQuery, i.e.,

$("td").onClick(function(event){
   var row = ...
   var col = ...
});

Christian C. Salvadó · Accepted Answer · 2009-04-25 05:31:40Z

227

You can use the Core/index function in a given context, for example you can check the index of the TD in it's parent TR to get the column number, and you can check the TR index on the Table, to get the row number:

$('td').click(function(){
  var col = $(this).parent().children().index($(this));
  var row = $(this).parent().parent().children().index($(this).parent());
  alert('Row: ' + row + ', Column: ' + col);
});

Check a running example here.

answered Apr 25, 2009 at 5:31

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

EarlyPoster Over a year ago

Why does it fail on column spans @grom?

Andrew D. Over a year ago

@Forkrul Assail, @CMS It's fail with ROWSPAN's jsbin.com/eyeyu/1099/edit#preview Click on cell with text "12". Column index must be 4

shanish Over a year ago

I have some datas in the variable "data".....is it possible to append this "data" into the table with this col and row value

eddyparkinson Over a year ago

ROWSPAN & COLSPAN work around: This makes the click work when SPAN is used jsbin.com/eyeyu/1307/edit

SpYk3HH Over a year ago

var row = $(this).closest('tr').index()

Phillip Senn · Accepted Answer · 2011-03-07 21:39:04Z

124

$('td').click(function() {
    var myCol = $(this).index();
    var $tr = $(this).closest('tr');
    var myRow = $tr.index();
});

answered Mar 7, 2011 at 21:39

Phillip Senn

47.8k92 gold badges263 silver badges381 bronze badges

Comments

Pablo Claus · Accepted Answer · 2012-08-10 19:08:15Z

37

Get COLUMN INDEX on click:

$(this).closest("td").index();

Get ROW INDEX on click:

$(this).closest("tr").index();

edited Aug 10, 2012 at 19:08

Pablo Claus

5,9163 gold badges31 silver badges40 bronze badges

answered Aug 10, 2012 at 4:15

Louie Santiano

3713 silver badges2 bronze badges

Comments

Samantha Branham · Accepted Answer · 2009-04-25 05:32:50Z

22

Off the top of my head, one way would be to grab all previous elements and count them.

$('td').click(function(){ 
    var colIndex = $(this).prevAll().length;
    var rowIndex = $(this).parent('tr').prevAll().length;
});

answered Apr 25, 2009 at 5:32

Samantha Branham

7,5112 gold badges34 silver badges46 bronze badges

Comments

Chris Brandsma · Accepted Answer · 2009-04-25 15:33:19Z

6

Can you output that data in the cells as you are creating the table?

so your table would look like this:

<table>
  <thead>...</thead>
  <tbody>
    <tr><td data-row='1' data-column='1'>value</td>
      <td data-row='1' data-column='2'>value</td>
      <td data-row='1' data-column='3'>value</td></tr>

  <tbody>
</table>

then it would be a simple matter

$("td").click(function(event) {
   var row = $(this).attr("data-row");
   var col = $(this).attr("data-col");
}

edited Apr 25, 2009 at 15:33

answered Apr 25, 2009 at 4:31

Chris Brandsma

11.7k6 gold badges50 silver badges60 bronze badges

4 Comments

Samantha Branham Over a year ago

Which html spec do those attributes comply with? I can't seem to find them.

Chris Brandsma Over a year ago

HTML spec 5, which allows for custom attributes starting with the prefix 'data-'.

Daniel Powell Over a year ago

even though they aren't in spec it won't break older browsers < HTML5

WhiteAngel Over a year ago

You can access "data" fields just by calling: $(this).data('row');

mkoryak · Accepted Answer · 2009-04-25 05:20:54Z

0

its better to bind a click handler to the entire table and then use event.target to get the clicked TD. Thats all i can add to this as its 1:20am

answered Apr 25, 2009 at 5:20

mkoryak

58.1k64 gold badges204 silver badges262 bronze badges

2 Comments

Toby Speight Over a year ago

While this might be a valuable hint to solve the problem, a good answer also demonstrates the solution. Please edit to provide example code to show what you mean. Alternatively, consider writing this as a comment instead.

mkoryak Over a year ago

thanks, I will consider revising this answer in another 10 years

Collectives™ on Stack Overflow

Table row and column number in jQuery

6 Answers 6

5 Comments

Comments

Comments

Comments

4 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

Comments

Comments

Comments

4 Comments

2 Comments

Linked

Related