Meteor - How to make the clicked table row maintain it's highlighted color

Question

I have the following meteor.js templates:

<template name="users">

    <div class="container-fluid">
        <div class="row-fluid"> 
            <div class="page-header">
              <h1><small>Users List</small></h1>
            </div>

            <table class="table table-bordered table-striped table-hover">
                <thead>
                    <tr>
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                   {{#each userList}}
                    {{>userRow}}
                   {{/each}}
                </tbody>
            </table>
        </div>
    </div>
</template>
<template name="userRow">
     <tr class="userRow">
        <td>{{name}}</td>
     </tr>
</template>

Here is the corresponding event handler:

Template.userRow.events({
    'click .userRow':function(evt,tmpl){
        console.log(tmpl.data.name);

    }
});

here is the css:

.table-striped tbody tr.highlight td {
    background-color: red;
}

.table-hover>tbody>tr:hover>td, .table-hover>tbody>tr:hover>th {
  background-color: #550055;
  color:#eeeeee;
}

The highlighting while hovering works fine, but, when a specific row is clicked on, it does not retain its highlighted color when the mouse hovers away.

What can I do to fix this?

Answer 1

Assuming you want to add the highlight class to the userRow , you could try something like this:

Template.userRow.events({
  'click .userRow': function(e) {
    console.log(this.name);
    $('.userRow').removeClass('highlight');
    $(e.currentTarget).addClass('highlight');
  }
});