Jquery changing class one row on table

Question

I'm using backbone, jquery and handlebars on my project.

I'm trying to change row class just on click.
I mean if I click edit button (right of the table), it changes the class.

Look the table screenshot to understand.

AdminTableView.js

var addAdminPanelView = Backbone.View.extend({

  el:$(".page"),
  events:{
      'click #editButton':'editEvent',
      'click #deleteButton':'deleteEvent'
  },


  editEvent:function(){
      console.log("edit");
      this.$el.children().find("th").addClass("info");
  },

My template

 <tbody id="myTable">
  <tr class="active">
    {{#travels}}
    <th>{{user.department.departmentName}}</th>
    <th>{{user.managerID}}</th>
    <th>{{user.firstName}} {{user.lastName}}</th>
    <th>Seyahat Başlangıcı</th>
    <th>Seyahat Sonu</th>
    <th>{{location}}</th>
    <th>{{travelPurpose}}</th>
    <th>{{travelCost}}</th>
    <th>{{projectCode}}</th>
    <th> <a href="/#travel">
        <span id="deleteButton" class="glyphicon glyphicon-minus-sign"></span>
    </a>
        <a href="#">
            <span id="editButton" class="glyphicon glyphicon-edit"></span>
        </a>
    </th>
    {{/travels}}
  </tr>
</tbody>

If I click any edit button, all rows have added class "info"

Louys Patrice Bessette Louys Patrice Bessette · Accepted Answer · 2017-04-23T00:13:56

Seems like the event if fired on the "edit" button click.

But you have to know on which row.
The use of .target as in "event.target" may help to find the parent row.

Try this:

editEvent:function(e){
      console.log("edit");
      $(e.target).closest("tr").addClass("info");
  },

Jquery changing class one row on table

2 Answers