Add class on click and remove when clicked again to that particular tr or span

Question

when i am clicking to any it selects all the rows in the table but i want to be specific to the click.

my js is-

$(document).ready(function() {
    //appendScroll(scrollbarElement = $('.acraft-panelgroup'))
    $("#runway-select > tr").click(function() {
        // $("#runway-select ").parent('td span').removeClass("activehero");
        $("#runway-select span").parent().toggleClass("activehero");
    });
})

my html is -

<tbody id="runway-select">
    <tr class="text-center">
        <td><span class="glyphicon glyphicon-ok"></span>  </td>
        <td>04</td>
        <td>7102<span class="glyphicon glyphicon-info-sign"></span></td>
        <td><input type="text" class="form-control" /></td>
        <td></td>
</tbody>

Please help me out if you can . I tried using Parent() but it is not working .

Answer 1

 $(this).toggleClass("activehero");

This will toggle class on the tr .

 $(this).find('span').toggleClass("activehero");

This will toggle class on every span inside the tr .

this inside an event handler will be the current target. It is the HTML element you clicked.

.find() search a specified element descending from the specified target.

Answer 2

I assume you want to toggle class activehero of your table columns based on the clicked row, if so then you can use:

$("#runway-select > tr").click(function(){ 
    $(this).find('td').toggleClass("activehero");
});