在按鈕上切換選定的表格行突出顯示點擊

Question

我有一個簡單的表格，每行有一個選擇按鈕，當點擊時調用一個PHP腳本來更新具有所選項目ID的會話變量。這裏的表：

<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"); 
} 

Answer 2

你可以通過使用布爾值來跟蹤按鈕的狀態來實現這一點。然後在採取行動之前檢查按鈕的狀態。

Ps。你可以鏈接你的addClass（）和removeClass（）方法。

var buttonSelected = false; 

if(buttonSelected){ 
    $this.closest('tr').addClass("success").removeClass("danger"); 
    buttonSelected = true; 
} else { 
    $this.closest('tr').removeClass("success").addClass("danger"); 
    buttonSelected = false; 
}