javascript - 在单击按钮时切换选定的表格行突出显示

Question

我有一个简单的表，每行都有一个选择按钮，单击该按钮时调用 PHP 脚本以使用所选项目的 ID 更新 session 变量。这是表格:

<tr class="" id="PR9215">
  <td>CODE A</td>
  <td>Fresh Frust</td>
  <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="PR9594">
  <td>Oranges</td>
  <td>Fresh Oranges</td>
  <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="PR9588">
  <td>MANGO</td>
  <td>Fresh Mango</td>
  <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>

这是它调用的脚本:

$(document).ready(function() {
  $('button.btn-success').click(function() {
    var itemID = $(this).closest('tr').attr('id');
    // Create a reference to $(this) here:
    $this = $(this);
    $.post('updateSelections.php', {
      itemID: itemID,
      selectionType: 'yes'
    }, function(data) {
      data = JSON.parse(data);
      if (data.error) {
        var ajaxError = (data.text);
        var errorAlert = 'There was an error updating your selections - ' + ajaxError + '. Please contact Support';
        $this.closest('tr').addClass("warning");
        $('#alert_ajax_error').html(errorAlert);
        $("#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) {
      var httpStatus = (xhr.status);
      var ajaxError = 'There was an error updating your selections - AJAX request error. HTTP Status: ' + httpStatus + '. Please contact Support';
      console.log('ajaxError: ' + ajaxError);
      $this.closest('tr').addClass("warning");
      $('#alert_ajax_error').html(ajaxError);
      $("#alert_ajax_error").show();
    });
  });
});

这在进行初始选择时有效 - 表格行显示为绿色表示它已被选中。我现在需要对此进行扩展，以便在第二次单击“选择”按钮时，它会删除绿色表格行突出显示并将其返回到原始状态。

现在确定如何扩展脚本来实现这一目标。

Answer 1

检查以下逻辑:

$('button.btn-success').click(function() {
if ($this.closest('tr').hasClass("first_click")) {
  $this.closest('tr').removeClass();
//$( "tr" ).removeClass();
return false;
}else{
$this.closest('tr').addClass("first_click");
}