find which td the div is placed on in nested tables

Question

Here is my problem. I have nested tables something like this

<table id="tblMenu">
                    <tr>
                        <td valign="top">
                            <table id="tblMenu1">
                                <tr>
                                    <td>
                                        <div class="submenuRed" onclick="emptyTd();">                                                
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="submenuRed" onclick="emptyTd();">                                               
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="submenuRed" onclick="emptyTd();">                                               
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td valign="top">
                        </td>
                        <td valign="top">
                        </td>
                        <td valign="top">
                        </td>
                    </tr>
                </table>

When I click on div nested deep inside I want to find out the column position of table tblMenu.

How can I get it using jQuery

Pls suggest!

Thanks! Arshya

Answer 1

.closest() and .index()

function emptyTd() {
    var idx = $('#tblMenu1').closest('td').index();
    // index() starts counting at zero
};

http://jsfiddle.net/mblase75/KGEtq/