Изменить цвет кнопки в зависимости от другого столбца в таблице

Question

Я использую Datatables с X-editable и у вас есть несколько кнопок начальной загрузки в таблице. В принципе, если пользователь обновляет редактируемый столбец «Статус» до «Разрешен», я хочу, чтобы кнопка в столбце «Проверенная» стала зеленой. Если статус переключается на любой другой статус, он должен вернуться к красному.

Вот мой код, любая помощь приветствуется. Я не уверен, что я должен сделать это в x-редактируемом событии сохранения или событии clickatables click.

У меня есть скрипку установки: 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

Я сделал некоторые изменения в свой код, чтобы добиться изменения кнопки на основе состояния. Я удалил кнопку из html и добавил класс .validate к td, который удерживает кнопку. Я удалил метод $ ('# dataTables'). On ('click'). Я добавил дополнительный код в $ ('# status'). Editable ({}).

HTML Изменить

<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 Изменить

//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>'); 
    }; 
    } 
}); 

Вы можете просмотреть рабочий пример здесь: http://jsfiddle.net/n74zo0ms/7/