Javascript-如何通过单击tr中的元素（动态级别）来访问tr

Question

I try to access tr when click a element inside tr. But i don't know exactly level of the element

is possible to access tr if i don't know level of element? (i want to use javascript basic)

Here is my example

<script>
    function getTr (mythis) {
       mythis.parentNode.parentNode.setAttribute('class', 'test');
        // is possible to access tr if i don't know level of a tag
    }

</script>
<div>
    <table>
        <tr>
            <td>
               test
            </td>
            <td>
               <a href="#" onclick="getTr(this);">click me</a>
            </td>
        </tr>
        <tr>
            <td>
                <div>
                   test
                </div>
            </td>
            <td>
                <div>
                   <a href="#" onclick="getTr(this);">click me</a>
                </div>
            </td>
        </tr>
    </table>
</div>

How to do that thanks!

Answer 1

Absolutely. Keep iterating up mythis.parentNode until you get to where mythis.nodeName == "TR" , like so:

function getTr(mythis) {
    while(mythis.nodeName != "TR") mythis = mythis.parentNode;
    // may want to add some additional error checking, just in case this function
    // gets called by something that's not in a TR
    mythis.className = "test";
}

Answer 2

The jQuery version, also supports dynamically added tr 's.

You can remove the onclick part in your html.

$(function() {
    $('table').on('click', 'a', function(){
            e.preventDefault(); //so the browser wouldn't navigate elsewhere.
        var tr = $(this).closest('tr');
    });
});