Get node index of td

Question

If I have a body like the following... I know that if I click the first radio it returns 1. If I click the one on the outside of the table it returns 2. But when I click the nested table's first td it returns its index plus the 'parent's td index in two alerts. How can I return the nested td index only which should be 2? This is just a sample table structure that is dynamically built so it needs to work with virtually any table design and any td.

Any suggestions?
This is the code I am using to return the index when a user clicks on a td (I capture other indexes for an input, textarea, etc):

        $("td").click(function (event) {
            var nodeIndex = $("td").index();
            var nodeName = $(this).get(0).nodeName
            alert(nodeName + "," + nodeIndex);
        });

This is the sample body:

<body>  
    <input type="radio" />
        <table class="parent_table">
            <tr>
                <td>
                    <table class="nested_table">
                        <tr>
                            <td>
                                Sample Text</td>
                            <td>
                                &nbsp;</td>
                        </tr>
                    </table>
                </td>
                <td>
                    &nbsp;</td>
            </tr>
        </table>
       <input type="radio" />
    </body>

score 0 · Answer 1 · answered Feb 11 '12 at 05:04

0

This is the culprit, which calls all <td>s

var nodeIndex = $("td").index();

Replace with:

var nodeIndex = $(this).index();

answered Feb 11 '12 at 05:04

elclanrs

92,861
21
134
171

@elckabnrs Sorry I may have not been clear..It's still bubbling up the 2nd alert. I need to suppress the click from picking up the td underneath. – Rob Feb 11 '12 at 05:09
I am looking at http://stackoverflow.com/questions/1967537/how-to-stop-event-bubbling-with-jquery-live and tried e.stopImmediatePropagation(); and it still does not work. – Rob Feb 11 '12 at 05:25
If I understand correctly, you want to be able to click whatever `` no matter its depth and pup up an alert with its index. Is this correct? – elclanrs Feb 11 '12 at 05:28

score 0 · Answer 2 · answered Feb 11 '12 at 05:05

Tables already have convenient properties cellIndex on td, and rowIndex on tr. This means you do not need to use jQuery.

Instead, try something like this (which is more efficient anyway):

// set ID "parent_table" on the parent table, then...
document.getElementById('parent_table').onclick = function(e) {
    e = e || window.event;
    var t = e.srcElement || e.target;
    while( t != this && (!t.tagName || t.tagName != "TD")) t = t.parentNode;
    if( t.tagName == "TD") {
        alert("You clicked on cell number "+t.cellIndex+" in row number "+t.parentNode.rowIndex);
    }
}

On top of being more efficient, it avoids the confusion you're putting jQuery through. When you click on a nested TD in your code, you're actually clicking on the parent table's TD as well as the nested one, so you get two alerts. Here, you'll only ever get one.

It's not the cellindex, but the hierarchy of the td in the page so if there were 10 td's in the table/page and I click the 8th one it returns 8. But what happens if the table is in another table, it picks up cell 8 and then the cell that is the parent of the nested table. — Rob, Feb 11 '12 at 12:58
You can still use my code. Just replace the `alert` line, and find out the index of the cell in the variable `t`. Because the event handler is only registered on one element and works its way up to the nearest table cell, you will still only get one alert per click here. — Niet the Dark Absol, Feb 11 '12 at 19:59

score 0 · Accepted Answer · answered Feb 12 '12 at 13:55

Solved. I just put the td into a global click and then was able to record the nodename and index in the one event which eliminated the double alert....

jQuery('td').live('click', function (event) {

    if (event.target.nodeName.toLowerCase() == "td") {
        var nodeIndex = $("td").index(this);
        var nodeName = $(this).get(0).nodeName
        alert(nodeName + "," + nodeIndex); 
    }

});

Get node index of td

3 Answers3