Search for cell positions (row, column) in nested tables

Question

I have the following simple jQuery bit that tells me which row / column is a cell inside a table (excluding clans).

var col = $this.index() + 1; var row = $this.closest('tr').index() + 1; 

Simple enough ... except that my tables are nested inside other tables, and I don't know what the offset is. For example, I have cell (1,1), this cell is in a table that is in the second cell of another table ... And this first cell has a table with three columns. So my cell is really (4.1)

EDIT: A more complete sample, with more test cases. I almost decided. Just some weird cases that cause problems. (now with color tests)

http://jsfiddle.net/gibble/J3uER/

... I understand that this is not normal, and html is stupid, but this is what I need to work with.

Answer 1

http://jsfiddle.net/juSm2/

I did this with iteration counts. This is a bit more complicated, but your task too. :) And some html modifications are necessary: ​​we need to mark the main lines to distinguish them from the nested lines. I added the .row class to achieve this.

 $('td').click(function (event) { event.stopPropagation(); $(this).addClass('clicked'); var row = 0; $('tr.row').each(function () { row++; if ( $(this).find('.clicked').length ) { var td = 0; $(this).find('td').each(function () { if ( !$(this).find('td').length ) { td++; if ( $(this).is('.clicked') ) { alert( 'row = ' + row + ', td = ' + td ); $('.row .clicked').removeClass(); } } }); // td each } }); // .row each }); // td click <table> <tr class="row"> <td>A1</td> <td>B1</td> ... </tr> <tr class="row"> <td>A2</td> <td>B2</td> ... </tr> </table> <table> <tr class="row"> <td> <table> <tr> <td>A3</td> <td>B3</td> ... </tr> </table> </td> <td> <table> <tr> <td>F3</td> <td>G3</td> ... </tr> </table> </td> </tr> </table>