Finding td element position in table row

Question

How would I go about finding a td element's position in a table row? I have seen this code suggested, but is there a way to do this with having each td tag contain an onclick event?

<table>
  <tr>
    <td onclick="myFunction(this)">Click to show cellIndex</td>
    <td onclick="myFunction(this)">Click to show cellIndex</td>
    <td onclick="myFunction(this)">Click to show cellIndex</td>
    <td onclick="myFunction(this)">Click to show cellIndex</td>
 </tr>
</table>

<script>
 function myFunction(x) {
   alert("Cell index is: " + x.cellIndex);
}
</script>

I have a grid of images and I am trying to see which images in the grid have been clicked. I tried this:

$('td img').on('click', function(x){
   console.log("Cell index is: " + x.cellIndex); 
});

But it just logs undefined

Possible duplicate of [javascript: getting td index](http://stackoverflow.com/questions/6470877/javascript-getting-td-index) — Iswanto San, Mar 30 '16 at 02:49

Federico Sosa · Accepted Answer · 2016-03-30T03:26:12.387

4

$('td img').on('click', function(e) {
  var td = $(this).parent();
  var tr = td.parent();
  
  var children = tr.children().length;
  
  var tdIndex = td.index() + 1;
  var trIndex = tr.index();
  
  console.log((trIndex * children) + tdIndex);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><img src="1.jpg" /></td>
    <td><img src="2.jpg" /></td>
  </tr>
  <tr>
    <td><img src="1.jpg" /></td>
    <td><img src="2.jpg" /></td>
  </tr>
</table>

edited Mar 30 '16 at 03:26

answered Mar 30 '16 at 03:06

Federico Sosa

94
3

If I had a large grid, say, 8 x 8, would the index start over again at zero once I clicked the first image in the second row? – Mahmud Adam Mar 30 '16 at 03:17
Yes, but I just edited my snippet to accomplish with your request. – Federico Sosa Mar 30 '16 at 03:26

score 2 · Answer 2 · answered Mar 30 '16 at 02:50

$('table tr td').click(function() {

  console.log($(this).index()) //use index() to get the index of clicked td

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Click to show cellIndex|</td>
    <td>Click to show cellIndex|</td>
    <td>Click to show cellIndex|</td>
    <td>Click to show cellIndex|</td>
  </tr>
</table>

attach a click to td and use .index() to get the index of click td

faino · Answer 3 · 2016-03-30T02:57:09.517

In vanilla JavaScript, you could handle it like so:

var tds = document.querySelectorAll('td');
for(var i = 0, len = tds.length; i < len; i++) {
    tds[i].addEventListener('click', function(e){
    var td = this || (e || event).target;
        alert(td.cellIndex)
  });
}

Attaching the onclick event to each TD element on the page. Here's a Fiddle of it in action, and with jQuery you just need to specify what the x is referencing.

$('td').on('click', function(e){
    alert('this.cellIndex: ' + this.cellIndex + '\n$(this),index(): ' + $(this).index());
});

Documentation on event.target

score 2 · Answer 4 · answered Mar 30 '16 at 02:52

2

You can use $.index() function in jquery to get the object's index

https://api.jquery.com/index/

 function myFunction(x) {
   alert($(x).index());
 }

Hope it helps.

answered Mar 30 '16 at 02:52

Jimmy.B

225
2
14

score 2 · Answer 5 · answered Mar 30 '16 at 02:56

2

You just need to call .index() on the element that you are trying to get the index of.

$('td img').click(function(){
    var index = $(this).parent().index();
});

Here is a fiddle:

https://jsfiddle.net/407u4Lp2/1/

answered Mar 30 '16 at 02:56

Sean Bradley

21
2

Finding td element position in table row

5 Answers5