向AJAX请求中的行添加表类/删除表类

Question

我使用Bootstrap和PHP创建了一个简单的表，如下所示：

 <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> 

我有一个脚本，当您单击“是”按钮以选择要向所选表行添加类的行时，该脚本将运行-这很好-突出显示所选行为绿色。 用户只能在提交表单之前选择一行，因此我现在需要对其进行修改，以便他们在选择表格行时以绿色突出显示所选行，但删除表格中所有其他表格行的所有表格行类。

这是我目前的脚本：

 $(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(); }); }); }); 

我希望可以将其扩展为也删除非选定行的所有类，以便仅在选定行中添加成功类，但不确定从何处开始。

Answer 1

单击表中所有tr元素中的button后，删除所需的相关类，然后仅将相关类添加到特定的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>