CODEWITHSUNDEEP
javascriptjqueryhtml
Mahmud Adam
Mahmud Adam

Reputation: 3579

Finding td element position in table row

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

Upvotes: 2

Views: 8364

Answers (5)

Federico Sosa
Federico Sosa

Reputation: 94

$('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>

Upvotes: 4

faino
faino

Reputation: 3224

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

Upvotes: 2

Sean Bradley
Sean Bradley

Reputation: 21

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/

Upvotes: 2

Jimmy.B
Jimmy.B

Reputation: 225

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.

Upvotes: 2

guradio
guradio

Reputation: 15555

$('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

Upvotes: 2

Related Questions