CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
shinorz0721
shinorz0721

Reputation: 145

Get Table <tr> when <td> is Clicked

How can I get the tr instead of td event?

app.controller('myController', ['$scope'], function($scope) {
    $scope.OnRowFocused = function (event) {
        event.target.attributes.class.nodeValue = 'active';
    }
});

<table>
    <tr ng-click="OnRowFocused($event)">
        <td>
            Column 1
        <td/>
        <td>
            Column 2
        <td/>
    </tr>
</table>

When I click on any column in the row, I always get td event instead of tr. I want to get tr event so I can highlight the focused row when the user interact with it.

Upvotes: 1

Views: 2223

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

Do use event.currentTarget that will give you current element where event is happening.

$scope.OnRowFocused = function (event) {
    console.log('This is the correct element',event.currentTarget);
    console.log("class list", event.currentTarget[0].classList)
};

I'd not recommend to go for this approach, where you are seems to be manipulating DOM from controller. It should be go somewhere in directive.

Demo Plunkr

Upvotes: 1

andrew
andrew

Reputation: 1816

event.target is the element that received the click.

Try using this within the event handler - this is the element upon which the event is registered.

Upvotes: 0

Related Questions