CODEWITHSUNDEEP
javascriptjqueryhtml-table
Redwall
Redwall

Reputation: 1020

Display X & Y Value of Selected row/cell in a HTML Table

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.

Upvotes: 1

Views: 1394

Answers (2)

Hiren Desai
Hiren Desai

Reputation: 1091

Well I can suggest the following:

var rowIndex= jQuery.ArrayIn($(this).parent(),$('#tableID tr'));
var columnIndex=jQuery.ArrayIn($(this),$(this).parent().children('td'));


It may be possible that your script would become busy for such operation. I rather would recommend you that you store your custom attribute such as row Number and column number on each <td> and that would even make your operation not only easy but also scale-able to provide much more functionality than just selection.

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337646

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();

Upvotes: 2

Related Questions