将表类/删除表类添加到 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>