CODEWITHSUNDEEP
javascripthtmlcssmeteor
E. Pace
E. Pace

Reputation: 75

Change css background color on click in meteor

I am trying to change the background of the row in a table when a button is clicked. Currently my code will only change the background color for the first row in the table and only that first row. Even if I click the button of another row it still makes the first row background green.

How do I go about getting it to change the background for each individual row with it's corresponding button? (i.e. The button is in the row and when it is clicked that specific row will have its background color change)

Here is the html code for my table:

<template name="adminPage">
 ...
  <tbody>
    {{#each student}}
      <tr  class="accordion-toggle mainRow">
         <td>{{> expandButton}}</td>
         <td>{{Name}}</td>
         <td>{{PhoneNumber}}</td>
         <td>{{VipID}}</td>
         <td>{{> buttonSelections}}</td>
       </tr>
       <tr>
         <td colspan="12" class="hiddenRow">
 ...
</template>

<template name="buttonSelections">
 ...
  <button class="btn btn-success btn-sm">
    <span class="glyphicon glyphicon-log-in"> Check-In</span>
  </button>
 ...
</template>

Here is the js code I have:

Template.buttonSelections.events({
  'click .btn-success, click .glyphicon-log-in'() {
   $(this).closest('.mainRow').css({"background-color":"#13D620","color":"white"});
   }
  }
})

So, the problem is within selecting the specific row. When I tried:

Template.buttonSelections.events({
   'click .btn-success, click .glyphicon-log-in'() {
     $('.mainRow').css({"background-color":"#13D620","color":"white"});
    }
  }
})

I get the following when I click any of the check-in buttons

enter image description here

Upvotes: 0

Views: 885

Answers (1)

haxxxton
haxxxton

Reputation: 6442

You can access the element clicked by hooking into the event.target.

Template.buttonSelections.events({
  'click .btn-success, click .glyphicon-log-in': function(e) {
   $(e.target).closest('.mainRow').css({"background-color":"#13D620","color":"white"});
   }
  }
});

Upvotes: 1

Related Questions