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

从表格中的所有button元素点击tr后，删除所需的相关课程，并仅将相关课程添加到特定tr。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: