JQuery traversing table column

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.

So what is your question? What have you already done yourself? — Willem Mulder
– Willem Mulder, Commented Dec 22, 2011 at 14:40

Esailija · Accepted Answer · 2011-12-22 14:44:30Z

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.

answered Dec 22, 2011 at 14:44

Esailija

140k24 gold badges280 silver badges328 bronze badges

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

5 Comments

user469453 Over a year ago

Hi, This is really close, however, targetRowIndex always returns the first element with a class of '.target' in the table. I need it to only return the index of the next element with a class of '.target' that is in the same table column as '.click'

Esailija Over a year ago

@user469453, yes I didn't make code that you can directly copy paste. That's why it says You can probably implement the rest of the precise functionality yourself if you realize what's going on in that code.. I am simply showing you how you can retrieve the rowIndex with a simple example, not creating your application. :) Hint: the targetRowIndex is static and [0] means the first element with class .target. :P

user469453 Over a year ago

Hi Esailija, Thats great thanks - is there a way i can find the column index also (i tried the obvious of changing rowIndex to colIndex)?

Esailija Over a year ago

@user469453 yes td elements have .cellIndex. Note that .rowIndex is actually got from tr element, (the td element's .parentNode). So to get the row index = this.parentNode.rowIndex and column index = this.cellIndex

Esailija Over a year ago

@user469453 you may find this useful quirksmode.org/dom/tests/table_access.html

Jason Meckley · Accepted Answer · 2011-12-22 14:41:10Z

1

you could probably find a solution using a combination of parent() and closest(), along with siblings, next, previous, etc. basically using the traversal methods to select "td.target"

answered Dec 22, 2011 at 14:41

Jason Meckley

7,6011 gold badge26 silver badges46 bronze badges

Collectives™ on Stack Overflow

JQuery traversing table column

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related