Toggle Selected Table Row Highlight on Button Click

Question

I have a simple table with a Select button for each row that when clicked calls a PHP script to update a Session Variable with the ID of the selected Item. Here's the table:

 <tr class="" id="PR9215"> <td>CODE A</td> <td>Fresh Frust</td> <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td> </tr> <tr class="" id="PR9594"> <td>Oranges</td> <td>Fresh Oranges</td> <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td> </tr> <tr class="" id="PR9588"> <td>MANGO</td> <td>Fresh Mango</td> <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td> </tr> 

and here's the script that it calls:

 $(document).ready(function() { $('button.btn-success').click(function() { var itemID = $(this).closest('tr').attr('id'); // Create a reference to $(this) here: $this = $(this); $.post('updateSelections.php', { itemID: itemID, selectionType: 'yes' }, function(data) { data = JSON.parse(data); if (data.error) { var ajaxError = (data.text); var errorAlert = 'There was an error updating your selections - ' + ajaxError + '. Please contact Support'; $this.closest('tr').addClass("warning"); $('#alert_ajax_error').html(errorAlert); $("#alert_ajax_error").show(); return; // stop executing this function any further } else { console.log('update successful - success add class to table row'); $this.closest('tr').addClass("success"); $this.closest('tr').removeClass("danger"); //$(this).closest('tr').attr('class','success'); } }).fail(function(xhr) { var httpStatus = (xhr.status); var ajaxError = 'There was an error updating your selections - AJAX request error. HTTP Status: ' + httpStatus + '. Please contact Support'; console.log('ajaxError: ' + ajaxError); $this.closest('tr').addClass("warning"); $('#alert_ajax_error').html(ajaxError); $("#alert_ajax_error").show(); }); }); }); 

This is working when it comes to making the initial selection - the table row is coloured green to indicate it has been selected. I now need to extend this so that when the Select button is clicked a 2nd time it then removes the green table row highlighting and returns it to it's original state.

Now sure how to go about extending the script to achieve this.

Answer 1

You chould achieve that by using a boolean to track the state of the button. Then check the state of the button before taking action.

Ps. You can chain your addClass() and removeClass() methods.

var buttonSelected = false;

if(buttonSelected){
    $this.closest('tr').addClass("success").removeClass("danger");
    buttonSelected = true;
} else {
    $this.closest('tr').removeClass("success").addClass("danger");
    buttonSelected = false;
}

Answer 2

Check below logic for that:

$('button.btn-success').click(function() {
if ($this.closest('tr').hasClass("first_click")) {
  $this.closest('tr').removeClass();
//$( "tr" ).removeClass();
return false;
}else{
$this.closest('tr').addClass("first_click");
}