Question

I have a table with some values. The first row and first column contain values of such called vertical and horizontal sizes respectfully. What I need to do is to click on a table cell and get the horizontal and vertical values for that clicked table cell. What it basically means – get the value of first table cell in the row where the clicked table cell is located and get the first table cell value of the column where the clicked table cell is located. I’m getting the horizontal value with the following code:

var horizSize = $('th:first', $(this).parents('tr')).text();

But I’m not sure how to do that for the vertical line. How to get to the first table cell value of the column?

Thanks for helping.

Answer 1

I think the following should work:

var verticSize = $('tr:first td').eq($(this).index()).text();

JS Fiddle demo.

Note that in the demo I’ve also amended your horizSize selector, to:

horizSize = $(this).closest('tr').find('td:first').text();

And subsequently refined to:

horizSize = $(this).prevAll('td:last').text();

The above assumes that you want the value of the cell from the :first tr element, whether that be in the thead or tbody. If you’ve marked up the heading cells as th then you’ll need to amend the td of the selector to th.

---

Edited in response to Felix Kling’s comment:

Instead of $('tr:first td'), $(this).closest('table').find('tr:first td') might be better (depending on the other markup).

That’s something I should’ve thought of, myself, really. And, if there is more than one table in the document then this change would be essential, to demonstrate:

var verticSize = $(this).closest('table').find('tr:first td').eq($(this).index()).text();

JS Fiddle demo.

References:

• closest().
• eq().
• find().
• :first selector.
• index().
• :last selector.
• prevAll().