CODEWITHSUNDEEP
javascriptjqueryajax
user982124
user982124

Reputation: 4610

Add Table Class/Remove Table Class to rows on AJAX Request

I've created a simple table using Bootstrap and PHP which looks like this:

<table class="table table-condensed table-striped table-bordered">
  <thead>
    <th scope="col">Name</th>
    <th scope="col">Date</th>
    <th scope="col">Select</th>
  </thead>
  <tbody>

    <tr id="RFIT1000">
      <td>Penny Lane</td>
      <td>10/03/2015</td>
      <td colspan="2">
        <button type="button" class="btn btn-success btn-sm">Yes</button>&nbsp;
      </td>
    </tr>
    <tr id="RFIT1001">
      <td>Fred Kruger</td>
      <td>18/01/2016</td>
      <td colspan="2">
        <button type="button" class="btn btn-success btn-sm">Yes</button>&nbsp;
      </td>
    </tr>
    <tr id="RFIT1002">
      <td>Bob Hope</td>
      <td>09/08/2016</td>
      <td colspan="2">
        <button type="button" class="btn btn-success btn-sm">Yes</button>&nbsp;
      </td>
    </tr>
  </tbody>
</table>

I have a script that runs when you click the "Yes" button to select a row to add a class to the selected table row - this is working well - to highlight the selected row green. The user is only allowed to select one row before they submit the form so I now need to modify this so that when they select a table row it highlights the selected row in green but removes any table row classes for all other table rows in the table.

Here's my script at the moment:

$(document).ready(function() {
  $('button.btn-success').click(function() {
    var refreshItemID = $(this).closest('tr').attr('id');
    console.log(refreshItemID);
    // Create a reference to $(this) here:
    $this = $(this);
    $.post('updateStaffSelection.php', {
      refreshItemID: refreshItemID,
      selectionType: 'yes'
    }, function(data) {
      data = JSON.parse(data);
      if (data.error) {
        console.log(data);
        console.log('something was wrong with the ajax request');
        $this.closest('tr').addClass("warning");
        //make alert visible
        $("#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) {
      console.log('ajax request failed');
      // no data available in this context
      $this.closest('tr').addClass("warning");
      //make alert visible
      $("#alert_ajax_error").show();
    });
  });
});

I'm hoping it's possible to extend this to also remove any classes for the non selected row so that only the selected row has the success class added but not sure where to start here.

Upvotes: 0

Views: 480

Answers (1)

Dekel
Dekel

Reputation: 62536

Remove the relevant classes that you need once the button was clicked from all of the tr elements in the table, and add the relevant class only to the specific tr.

$(function() {
  $('button.btn-success').click(function() {
    // Remove the classes from all of the TR elements
    $(this).parents('table').find('tr').removeClass('success warning danger');
    
    // Add the class only to the specific TR element
    $(this).parents('tr').addClass('success');
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table class="table table-condensed table-striped table-bordered">
  <thead>
    <th scope="col">Name</th>
    <th scope="col">Date</th>
    <th scope="col">Select</th>
  </thead>
  <tbody>

    <tr id="RFIT1000">
      <td>Penny Lane</td>
      <td>10/03/2015</td>
      <td colspan="2">
        <button type="button" class="btn btn-success btn-sm">Yes</button>&nbsp;
      </td>
    </tr>
    <tr id="RFIT1001">
      <td>Fred Kruger</td>
      <td>18/01/2016</td>
      <td colspan="2">
        <button type="button" class="btn btn-success btn-sm">Yes</button>&nbsp;
      </td>
    </tr>
    <tr id="RFIT1002">
      <td>Bob Hope</td>
      <td>09/08/2016</td>
      <td colspan="2">
        <button type="button" class="btn btn-success btn-sm">Yes</button>&nbsp;
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions