Change button color depending on another column in table

Question

I'm using Datatables with X-editable and have some bootstrap buttons in a table. Basically if the user updates the editable 'Status' column to 'Resolved' I want the button in the 'Validated' column to turn green. If the status is switched back to any other status it should turn back to red.

Here is my code, any help is appreciated. I'm not certain if I should do it on the x-editable save event or the datatables click event.

I have a fiddle setup: http://jsfiddle.net/n74zo0ms/2/

HTML:

<div class="table-responsive">
  <table class="table table-striped table-bordered table-hover" id="dataTables">
    <thead>
      <tr>
        <th>Occured <i class="fa fa-sort"></i></th>
        <th>Status <i class="fa fa-sort"></i></th>
        <th>Validated <i class="fa fa-sort"></i></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td align="center">12/08/2015 22:36</td>
        <td><span id="status" class="status" data-type="select"></span></td>
        <td><a href="#" class="btn-sm btn-danger" style="margin-left: 5px;"><i class="fa fa-exclamation-triangle"></i> Not Validated</a></td>
      </tr>
    </tbody>
  </table>
</div>

JQuery:

//Switch button to green if status = resolved
$('#dataTables').on('click', '.btn-danger', function(e) {
  if ($('#status').text() == 'Resolved') {
    var cell = $(this).closest('td');

    $.get($(this).attr('href'), function() {
      // Update "Resolved" column
      $('#dataTables').DataTable().cell(cell).data(
        '<a href="#" class="btn-sm btn-success" style="margin-left: 5px"><i class="fa fa-thumbs-o-up"></i> Resolved</a>'
      );
    });

    e.preventDefault();
  }
});

Answer 1

I made some updates to your code to achieve the button change based on the status. I removed the button from the html and added a class of .validate to the td that holds the button. I deleted the $('#dataTables').on('click') method. I added additional code to $('#status').editable({}).

HTML Change

<tbody>
  <tr>
    <td align="center">12/08/2015 22:36</td>
    <td><span id="status" class="status" data-type="select"></span></td>
    <td class="validated"></td>
  </tr>
</tbody>

JavaScript Change

//initialize the editable column
$('#status').editable({
  url: '/post',
  pk: 1,
  source: [{
    value: 'New',
    text: 'New'
  }, {
    value: 'In Progress',
    text: 'In Progress'
  }, {
    value: 'Resolved',
    text: 'Resolved'
  }],
  title: 'Example Select',
  validate: function(value) {
    var cell = $(this).parent().parent().find(".validated");
    cell.empty();
    if(value == 'Resolved') {
      cell.append('<a href="#" class="btn-sm btn-success" style="margin-left: 5px"><i class="fa fa-thumbs-o-up"></i> Resolved</a>');
    } else {
      cell.append('<a href="#" class="btn-sm btn-danger" style="margin-left: 5px;"><i class="fa fa-exclamation-triangle"></i> Not Validated</a>');
    };
  }
});

You can view the working example here: http://jsfiddle.net/n74zo0ms/7/