Question

I have a table as follows;

<table>
<tr>
<th scope="col"></th>
<th scope="col">Column One</th>
<th scope="col">Column Two</th>
<th scope="col">Column Three</th>
<th scope="col">Column Four</th>
</tr>
<tr>
<th scope="row">Row One</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Row Two</th>
<td></td>
<td></td>
<td class="click"></td>
<td></td>
</tr>
<tr>
<th scope="row">Row Three</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Row Four</th>
<td></td>
<td></td>
<td class="target"></td>
<td></td>
</tr>
<table>

I would like to be able to click on the <td> with a class of ‘click’ and then alert me as to how many rows away the <td> with a class of target is. (in the above example it would return 2).

There may be other <td> elements in the table with a class of target. I am only interested in the number of rows until the next target in the same row as my ‘clicked’ td. Any targets above my ‘clicked’ <td> or in other columns should be ignored.

If there are no other ‘target’ <td>‘s after the clicked element in the same row, the alert should read ‘no other targets’.

I hope this is clear.

Answer 1

Do you mean like this?

var targetRowIndex = $('.target')[0].parentNode.rowIndex;

$(".click").bind("click",function(){
   alert( targetRowIndex - this.parentNode.rowIndex ); 
});

http://jsfiddle.net/BZDyr/3/

You can probably implement the rest of the precise functionality yourself if you realize what’s going on in that code.