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

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

本文关键字:AJAX 请求 删除 添加      更新时间:2023-09-26

我使用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();
    });
  });
});

我希望有可能扩展这一点,也删除任何类的非选定行,以便只有选定的行有成功类添加,但不确定从哪里开始这里。

从表中的所有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>