Question

I’m working on creating a javascript based spreadsheet application. Right now I can dynamically create the spreadsheet as a table with a supplied number of rows and columns and a text input in each cell as can be seen in this picture.

I’d like to have a generic event tied to all of the inputs in the table in which I am able to determine the row index and column index of the input that fired the event. Something like this:

$('.spreadsheet-cell').click(function () {
     var rowIndex = $(this).attr('rowIndex');
     var columnIndex = $(this).attr('columnIndex');
});

I originally tried implementing things by dynamically adding row and column index attributes to the html input element when I create it but when I add rows or columns after the original spreadsheet has been created things get messy trying to shift the value of these attributes around. I think I could make that method work if it came down to it but it seems messy and I’d prefer not to mess around so much with the DOM when I figure that there is probably some way using jQuery to determine the relative index of the parent <td> and <tr>.

Answer 1

Use jQuery .index. Within your function:

var rowIndex = $("#table tr").index($(this).closest('tr'));
var colIndex = $("#table td").index(this);