Question

I have created a HTML table with clickable cells (td) within that table (Similar to Excel)

I have an input field (read only)

<input type="text" readonly=""> 

I want to display the coordinates of where the user is clicked when they click on the table in this input field.

For example if a user is clicked on a cell which corresponds on X axis to Name 2 and Y axis to 16, then I want the input field to say “Name 2 | 16”

It is a reference display so the users can see what they are clicked on in a cluttered grid. Excel does this when u click on any cell within Excel.

I have created a jsfiddle here

http://jsfiddle.net/37PGT/

Looking for some assistance.

Answer 1

Add an id of cellRef to the input, then in your mouseup handler add this code:

var row = $(this).closest('tr').index() + 1;
var cell = $(this).index();
$('#cellRef').val(row + ' | ' + cell);

Updated fiddle

To get the label of the row (so you can format the input to be Name 1 | 1, use this line to set row:

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