CODEWITHSUNDEEP
javascriptjqueryonclick
Chankey Pathak
Chankey Pathak

Reputation: 21666

Identify the td which was clicked in a table

I have a table like below

enter image description here (full screen: https://i.sstatic.net/7Mluq.png)

Here you can see the "down" arrow on some td.

for example the <td> for 2nd row and 4th column is:

<td>
   <a href="doc4.html" name="doc4" target="_blank">doc4</a>
   <span class="arrow"></span>
   <div class="toggle" style="display: none;">
      <div><a href="image_3.1.jpg" name="image" target="_blank">image</a></div>
      <div><a href="testingwrongtype_2.2.gif" name="testingwrongtype" target="_blank">testingwrongtype</a></div>
      <div><a href="vsd_2_1.2.png" name="vsd_2" target="_blank">vsd_2</a></div>
      <div><a href="BMP_1.3.bmp" name="BMP" target="_blank">BMP</a></div>
   </div>
</td>

Say if user clicks on arrow of "2nd row and 4th column (which is doc4)" then I want to get the row number in some variable for that.

var row_clicked = 2

How can I achieve this?

Upvotes: 0

Views: 821

Answers (6)

Kiranramchandran
Kiranramchandran

Reputation: 2094

Try this

    $('table .arrow').click(function(e){
    var trindex=$(this).parent().parent().index();
    alert(trindex);
});

SAMPLE HERE

Upvotes: 1

SPEC
SPEC

Reputation: 75

You need to first add class to the table or if you already have it use the same. Or you directly use 'table' or table's Id.

I'll provide small example.

  <table border='1' class='abc'>
<tr>
  <td>Jill</td>
  <td>Smith</td>        
  <td>50</td>
  </tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>      
  <td>94</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
</table>




 $('.abc').find('tr').click(function(){
    console.log("row clicked "+($(this).index()+1));


});

Upvotes: 0

SPEC
SPEC

Reputation: 75

by clicking on that arrow you can get the same thing. try this.

$('.arrow').click(function(){
console.log($(this).parent().parent().index());
});

Upvotes: 0

jPO
jPO

Reputation: 2552

Ah why did you delete your old question I almost had it done writing. So I'll wirte it once again.

assuming "this" is your clicked cell

var td = this;
var i_td = 0;
while( (td = td.previousSibling) != null ) 
  i_td++;

var i_tr = 0;
var tr = td.parentNode;
while( (tr = tr.previousSibling) != null ) 
  i_tr++;

your clicked row is i_tr and column is i_td, you can store this in your cookie from previous question and on document ready just call the yourtableselector.childNodes[i_tr].childNodes[i_td] and you have your previously clicked cell :)

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

try :

$('table td').click(function() {
  row_clicked = $(this).closest('tr').index();
});

Upvotes: 0

Felix
Felix

Reputation: 38102

You can use .parent() or .closest() to get the parent tr of clicked td along with .index() to get the index of this tr :

$('table tr td').click(function() {
    var row_clicked = $(this).closest('tr').index(); // or $(this).parent().index();
});

Upvotes: 1

Related Questions