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

@yvytty that is good! I've seen some of your answers, keep it up like that and you'll have a high level of rep very quickly :) — dsgriffin, May 29 '13 at 16:20

Blazemonger · Accepted Answer · 2013-05-29T16:17:08.820

1

.closest() and .index()

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

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

edited May 29 '13 at 16:17

answered May 29 '13 at 16:05

Blazemonger

90,923
26
142
180

I want to find out the position of column in table tblMenu not tblMenu1. See there are 4 td in tblMenu and the table tblMenu1 moves between these columns. I want to know which column in table tblmenu its in currently – Arshya May 29 '13 at 16:11
[Are you sure?](http://jsfiddle.net/mblase75/KGEtq/) Your question is unclear. Is there *more* HTML you didn't post in your question? – Blazemonger May 29 '13 at 16:16
If you want the column *containing* `tblMenu`, just change the selector in my code to `$('#tblMenu')` and you should be good. – Blazemonger May 29 '13 at 16:18

score 1 · Answer 2 · answered May 29 '13 at 16:34

1

add $(this) in the call of the emptyId function

and do this :

function emptyId(div) {
    div.text($('td[valign="top"]').index(div.closest('td[valign="top"]')) + 1);
}

it should work

answered May 29 '13 at 16:34

mlwacosmos

4,391
16
66
114

find which td the div is placed on in nested tables

2 Answers2